First, I’ll define some words I’ll be using. Card “View” is the window we see when we go straight to the card reviewing. Card “Preview” is what we see when we press eye button while editing HTML or CSS for the real cards (from “Edit Note” in the View), not “Cards” section in “Manage Note Types”.
The Preview works exactly like PC version does, while the View renders things differently. Apart from really rare problems (which is a bummer, but each time I could code around it), there are some things that are completely different. Why? For what reason? Below I wrote about 2 niche problems stemming from this just to have some examples, but they do not add anything to the idea above.
EX1
.card in Preview is a container that hold the given HTML, whereas in the View it is a document (everything around HTML). In the picture, I first made a border-left for .card, which worked great on both PC and in the Preview, but it was glued to the left edge of the screen in the View. Niche problem, might be a bad practice, but it is different for some reason. To make it work in the View, I had to make an additional wrapper (or thinking now I could have just added .card { width: fit-content }, but I feel like it might backfire). The point is the Preview still works as intended by PC in comparison.
EX2
Next, there is another niche problem. In my example sentences field I have a bunch of… sentences, and the problem is that if I’ll not separate them with two <br> they will be hard to read (with single one), but if I’ll do they will be too far apart taking a lot of space, requiring scrolling. I don’t know how many (if any) example sentences there will be, so it is a single field. How can I change the line-height exclusively for <br>? Yes, I thought the same — by changing <br>. See, if I’ll change #field-class br { content: ““; } it is barely modifiable, so I had to change br::after. And it works! I can set any margin or visuals I want, making it look nice. But yes, it works on PC, in the Preview (UPD: well, it doesn’t), but doesn’t in View with any modifications made. So, I had to create an element <l> with some margin modifications in l::before, just to have almost the same behavior. BUT: I have to write <l> or <l></l> (but I don’t do the closing
) to make it work in a lot of notes, not only in old ones (yeah-yeah, search and replace is there, on PC), and it is clearly a shitty solution.
Conclusion:
Again, there are other mismatches, but I never wrote them down because they were manageable. But I am writing this not because I am upset with <br> situation (well, I am upset), but because the Preview doesn’t feature any problems compared to the PC “views”, so it is bizarre that not only I have to code some visual solutions, I must quit and open cards in the View on AnkiDroid specifically to know what is View-allowed or not. Just think about that idea!
