How to get rid of line break (card template)? [Edited w/ new info]

Card Design
#1

I am developing a new card type. I want a line on the back of the user’s card to look like this…
Mnemonic: {{Mnemonic}}
…where the label is in a smaller font and the field content is in a different color text. That all works fine. But I can’t get rid of a line break after the colon.

In the card template I have:

<div class=“answer”>
<span class=“reminder”>Mnemonic: </span><span id=“Item0” class=“mnemonic”>{{Mnemonic}}</span>
<div>

and in the CSS I have:

.card {
  font-family: arial;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
}

.card .mnemonic {
  color: magenta;
}

.card .reminder {
    font-size: 60%;
}

.card .answer {
    text-align: left;
}

In Anki there’s always a line break after the colon, regardless of window/card width. In Firefox/Chrome/Safari, there’s not.

EDIT: replacing the second line of the card template excerpt with…

{{#Mnemonic}} <span>Mnemonic</span><span id=“Item0”>{{Mnemonic}}</span></span>

…still causes a line break between the <span>s. So it has nothing to do with the colon or space that ended the first span—it’s the multiple spans alone that generates the line break. Is this not a bug?

#2

I think this is because the field contains a <div> tag. Maybe the field was edited and a new line was added. In this case, a new div tag could appear.

866×558 18.4 KB

A few possible solutions.

  1. Replace {{Mnemonic}} with {{text:Mnemonic}} in the card template to strip all HTML tags.

    https://docs.ankiweb.net/#/templates/fields?id=html-stripping

  2. Add something similar to the Styling section in the card template.

    .mnemonic > div {
  display: inline-block;
}

  3. Use the card browser and Find - Replace with regular expressions to replace <div>|</div> with an empty string.

The AnkiWebView Inspector add-on might be helpful in such cases.

3 Likes
#3

Thanks @kelciour. However, there are no HTML tags in any of the test card Mnemonic field contents. If I insert “text:” as you suggested in your item 1, I still get the line break, but I lose any graphic content in the Mnemonic field.

#4

Maybe your Styling section contains something like this to make it look like there’s a line break after "Mnemonic: ".

.reminder {
  display: block;
}

I can’t think of anything else. I’d suggest to either install the AnkiWebView Inspector add-on or set the env var QTWEBENGINE_REMOTE_DEBUGGING to 8080 prior to starting Anki to enable Chrome DevTools. With Chrome DevTools it should be clear why there’s a line break.

https://addon-docs.ankiweb.net/#/porting2.0?id=webview-changes

Otherwise, maybe export one card as an apkg file and upload it on https://gofile.io/ or something similar.

#5

Yesterday I posted a link to a sample .apkg in a description of my card note project.

#6

Hi @brec,

Apparently, the display attribute of the mnemonic element(id="Item0" class="mnemonic") is set to block by the following line in the showItem() function :

theItem.style.display = "block";	// reveal

Screenshot:

mnemonic
mnemonic1104×686 215 KB

2 Likes
#7

@hkr, this was indeed the problem! (Part of the problem was that I didn’t fully understand the function of the block attribute.) I have updated the note type’s back template to set the mnemonic’s display attribute to inline-block and then to get the buttons on a new line after the mnemonic I have enclosed them in their own <div>.

Version 1.1 of the .apkg sample is at

#8

@hkr, P.S. What software is that a screenshot of?

#9

It’s Anki ⁨2.1.38 (Windows version). I customized the top bar and the bottom bar using css and javascript. The panel at the right side is AnkiWebView Inspector add-on (which I published to Ankiweb).