AnkiDroid renders different font sizes for cards with/without div wrappers

AnkiDroid (Android) Help
1

Cards render with inconsistent font sizes in AnkiDroid depending on whether the HTML content starts with a <div> tag or not.

Steps to reproduce:

  1. Create two cards with identical CSS styling:

    • Card A: <div><b>Text</b> content here</div>

    • Card B: <b>Text</b> content here

  2. View both cards in AnkiDroid

Expected behavior: Both cards should render with the same font size since they use the same CSS.

Actual behavior: Card A (with div wrapper) renders with larger text than Card B (without div wrapper).

Environment:

  • AnkiDroid version: [your version]

  • Android version: [your version]

  • Device: [your device]

What I’ve tried (none worked):

  • CSS font-size with !important

  • JavaScript to force font size after render

  • CSS display: contents on divs

  • CSS ::before pseudo-elements

  • Viewport units (vw)

  • text-size-adjust: 100%

The issue appears to be in how the WebView calculates initial font metrics based on HTML structure before CSS is applied. Cards starting with block-level elements (<div>) get different base sizing than cards starting with inline elements (<b>, text).

The only workaround is to normalize all card content to either all have div wrappers or none - but this requires database modification and can break intentional line breaks.

2

I’m not able to reproduce this, with or without the bold tags. [AnkiDroid 2.22.3, Android 9, Preview, fairly vanilla note type.]

  1. Did you see this behavior in Card browser > Preview, on the old study screen, or on the new study screen?
  2. You left out the important bits in your “Environment” section. When you respond, you should include your full version information from Settings > About > Copy debug info.
  3. Are you using one of the default note types (and which one), or a custom note type?
  4. Are you certain that there isn’t something in your note type styling or card template that is assigning other attributes to that otherwise empty <div>?

I’m also interested in some of the specificity of your reproduction steps. The closer we get to a minimum reproducible example of an issue, the easier it is to figure out why something is happening. You’ve got a lot of specifics, but not a lot of information about why (or if?) they are needed.

  • Is the bold formatting necessary?
  • You have the text on 2 separate cards – does it matter?
  • Are those separate cards made from 2 different fields of the same note (sibling cards), or are they separate notes?
  • If they are separate notes, are they the same note type and card type?
  • Does the same thing happen if you put that text within a single card template (for instance, in separate fields), or even within a single field of a note?
1 Like
3

GitHub issue: Cards render with different font sizes depending on whether content starts with <div> tag · Issue #20227 · ankidroid/Anki-Android · GitHub.