CSS in AnkiMobile works differently than desktop

[ilovesashimi]

All my cards are manually created, they could have multiple paragraphs, here’s an example:

Notice that 1st paragraph was separated by div, because it was pasted from browser. The 2nd and 3rd paragraph was separated by br, because it was either manually typed or pasted from plain text.

I don’t insert double line breaks between paragraphs, because that’ll make the gap too large. Instead, I use CSS to control the spacing. Here’s how it looks like when I review the card:

This is similar to how people use margin to separate p tags as opposed to using empty line, so it should be a common practice.

(Actually I’m not that against double line breaks, it’s just that I already created thousands of cards without it, so it’s too late to change).

Anyway, here’s the problem, on AnkiMobile, the styling of br doesn’t work:

I don’t know why it happens, by reading some stackoverflow questions, I think maybe AnkiMobile is not using a modern html rendering engine? In any case, is there any workaround? All I need is some spacing between paragraphs on AnkiMobile.

Thanks!

[dae]

Apple requires that iOS apps use its web rendering engine, Safari. It does not appear that Safari support changing the height of BR tags using that CSS (if at all). Double linebreaks may be your best option - you should be able to change them in bulk using the find&replace option in the browse screen.

[ilovesashimi]

Thanks. I heard that when you press enter while creating new cards, a br will be created but this is the new behavior only in recent versions - previously it was divs? Is that true? If yes, what was the reasoning behind the change? Thanks.

[dae]

Cloze deletions work better with br tags, and quite a few people prefer the generated HTML compared to having separate open/close tags.

[ilovesashimi]

Thanks for the explanation. So the new problem is: when user pastes from browser or Word, div will be used (p will also turn into div), but when user manually types or pastes from NotePad, br will be used. Normally there’s no visual difference, but when user tries to add custom css to all divs, discrepancy appears, and the discrepancy is hard to fix because there’s no surrounding tags around each line of plain text separated by br. Margin between lines is one example of custom css, but I imagine other people will come up with other stuff they want to do.

2 possible solutions I can think of:

1. automatically add spans around plain text
2. add an option to switch between using br (the new way) and using div (the old way) and default to the new way

Of course they could be harder than I thought, but just my 2 cents.

[jcznk]

Regarding the margin problem, maybe you could use some JS to automatically ‘duplicate’ all br tags.

E.g.

<script>
var brTags = document.getElementsByTagName("br");

for (let i = brTags.length - 1; i >= 0 ; i--) {
    let newBr = document.createElement("br");
    brTags[i].parentNode.insertBefore(newBr, brTags[i].nextSibling);
}
</script>

[ilovesashimi]

Thanks @jcznk for tuning in. At this point I feel this has become less about solving my own problem and more of a discussion with @dae about an elegant way to handle plain text. I now think naked text nodes are generally not a good practice because they can’t be targeted by css, and surrounding them with <span></span> is one of the possible solutions (if br is to be used, that is).

But still, thanks very much for your js solution to my problem. I understand the js code but am not familiar enough with Anki - where do you run this code? Do you insert it into the html of each card? Or do you write a script to loop over all cards and change them one by one and save them? In either case, how do you do that?

[dae]

I understand how the current behaviour is not ideal for your use case, but I’m afraid judging by the lack of similar comments, this does not seem to be an issue that affects many people.

[jcznk]

You need to add the code both to the Front and Back Templates of your notetype(s). Only to the front, if your Back Template uses the {{FrontSide}} field.

The script will ‘duplicate’ the br tags only while the cards are rendered in the Reviewer, but it won’t affect the actual HTML (like most JS code in Anki cards). Its purpose is just to behave like a pseudo CSS styling.

If you wish to quickly convert br to divs and viceversa directly inside the Editor, maybe you could take a look at this add-on: editor: batch replace in one field, also with regex - AnkiWeb