Checklist

• I have read the support page and am reporting a bug specific to AnkiDroid
• I have checked the manual and the FAQ and could not find a solution
• I have searched for similar existing issues (closest is Ankidroid auto resizes font when using .question class in card css #4721 but different root cause)

Does it also happen in the desktop version?

No - Anki Desktop renders both card types identically.

What are the steps to reproduce this bug?

1. Create a new Basic note type in Anki Desktop
2. Add two cards with identical CSS but different HTML structure in their fields:
   • Card A field content: <div>This is test content for comparing font sizes</div>
   • Card B field content: This is test content for comparing font sizes
3. Sync to AnkiDroid
4. Review both cards in AnkiDroid

Expected behavior

Both cards should render with identical font size since they use the same note type and CSS styling.

Actual behavior

Card A (content wrapped in <div>) renders with noticeably larger text than Card B (no div wrapper).

Why this matters

When editing cards in Anki Desktop, the editor inconsistently wraps content in <div> tags. In my collection of ~43,000 notes:

• 38.8% start with <div> wrapper (render larger)
• 28.5% have no <div> at all (render smaller)
• 32.7% have internal <div> for line breaks

This creates jarring font size inconsistency across a deck even though all cards use the same note type and CSS.

What I've tried (none worked)

• CSS font-size with !important on .card, .question, body, html
• JavaScript to force font size after DOM load
• text-size-adjust: 100% and -webkit-text-size-adjust: 100%
• CSS viewport units (vw)
• CSS display: contents on plain divs (this normalizes font size but breaks intentional line breaks created by </div><div> structures)
• Wrapping template content in additional containers

Debug info

AnkiDroid Version = 2.24.0 alpha4
Android Version = 16
Device = Samsung Galaxy A55 5G

Analysis

The issue appears to be in how the Android WebView calculates initial font metrics based on HTML structure before CSS is applied. Content starting with block-level elements (<div>) triggers different base sizing than content starting with text or inline elements.

This cannot be fixed via CSS or JavaScript because the WebView has already determined the base metrics before user styles are applied.

Possible solutions

1. AnkiDroid could normalize the HTML structure before rendering
2. AnkiDroid could apply a base stylesheet that resets font metrics more aggressively
3. Document this behavior so users can normalize their database content

Minimal test case

Create a note type with this styling:

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

Front template:

{{Front}}

Then create two cards:

• Card 1 Front field: <div>Test text here</div>
• Card 2 Front field: Test text here

Review both in AnkiDroid - they will have different font sizes.