Is this a bug with the CSS parser?

Anki Desktop
1

:heavy_check_mark: Your issue may already be reported! Please [search] before creating a new post.

  • [:heavy_check_mark:] Did you read the [Getting Help]?
  • [:heavy_check_mark:] Can you reproduce the problem after following the steps in [Troubleshooting]?
  • [:heavy_check_mark:] Did you check the [FAQs]?
  • [:heavy_check_mark:] Did you check the [Platform Notes]?

Anki on Windows
Version ⁨23.12.1 (1a1d4d54)⁩
Python 3.9.15 Qt 6.6.1 PyQt 6.6.1

A Basic card with one field.
The HTML content for the field is:

<div style="font-size: 10pt; font-style: italic;">This is a div with a <b>problem</b>!</div>

The template is:

{{myField}}

The Styling is:

* { font-size: 14pt; }

The expected outcome is:
Expected

The actual outcome is:
Actual
Am I doing something wrong, or is this a bug in the CSS parser?

Thank you.

2

I am not proficient in CSS, but I think the style set in b(* in Styling) has a higher priority than the style set in div.

1
11788×645 43.9 KB

3

Thank you for your reply. The issue is the word problem should be the same size as the rest of the text, but it is not. Your test demonstrates valid CSS rendering behaviour, which is not what I see in Anki.

4

If I understood correctly, the behavior I demonstrated is as same as the Anki actual outcome. You think that “The issue is the word problem should be the same size as the rest of the text”, however this is inconsistent with what I’ve tested.

5

You demonstrated what Anki “should” produce, but you did not test in Anki and show the actual outcome. Please see my screenshots of the actual results in Anki.

6

I just did some "fiddling"on codepen and the following code outputs the expected results:

<style>
* {
font-size: 14pt;
}

strong {
   font-size: 10pt;
}
</style>

<html>
<div style="font-size: 10pt; font-style: italic;">This is a div with a <strong>problem!</strong></div>
</html>

I think the issue is that I don’t know enough about CSS, if this is how it should be done. Feedback appreciated.

7

As I understand it, the * (universal) selector modifies the styling of every element, so it takes precedence over any inline style that doesn’t directly affect the specific element or tag itself. E.g., in your case, the inline style is applied to the parent <div> and not directly to the <b></b> tag.

Replacing * { font-size: 14pt; } with .card { font-size: 14pt; }, or adding div * { font-size: inherit; } to the Styling section seems to fix the issue.

3 Likes
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.