AnkiDroid card view/preview differences

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 :smiley:) 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!

The current preview screen is very new and AnkiDroid is in the process of implementing similar changes to the review screen. If you’re on the latest alpha (or other recent versions), you should be able to mess around with the “New Study Screen”. (If you don’t see it in Settings, go to About, and click on the Anki logo around 7 times, it should be in developer options).

1 Like

Well, great to know. It fixes EX1 problem even without “Frame style” options, which is great. But my poor <br> modifications still don’t exist on mobile (they don’t in Preview either, my fkup). I guess it solves my problem, might create another suggestion just for that alone (which will never be implemented I guess)