[Bug]: Bold text looks non-bold due to font-weight too small

[apienk]

Description

NOTE: Using Multiple Choice (1.16.27) within Question Set (1.21.13). Stand-alone Multiple Choice (1.16.27) is not affected.

Bold text is properly emphasized in the editor but in the activity it looks just like regular text, because font weight is set in CSS to 600 for both regular and <strong>. This is critical for questions where emphasis is important, for example in grammatical questions with some words highlighted.

Steps to reproduce

1. Create a new Question Set.
2. Add a Multiple Choice activity.
3. Type some regular and bold text in the question window.
4. Do the same in the answer window.
5. Save the content and look at the result.
6. Note bold text is indistinguishable from regular text.
7. Inspect the HTML and note that <strong> tags are correctly present.
8. Note that <strong> is set in CSS to weight 600, just as regular text.
9. Note that changing the font weight to 900 makes bold distinguishable again.

Environment

Wordpress

LMS

Other

What browsers are you seeing the problem on?

Chrome, Firefox

What Operating System are you seeing the problem on?

Linux (Debian), Windows 11

[otacke]

@apienk Thanks for reporting. I can reproduce what you are experiencing.

Workaround

If your WordPress theme allows to add custom CSS, you can add a workaround easily:

1. In your WordPress dashboard, go to "Appearance" -> "Customize"
2. Click on "Additional CSS". A text input area will appear.
3. Add

/* Can be removed once the bug is fixed (https://github.com/h5p/h5p-question-set/issues/188) */
.h5p-container.h5p-theme {
  font-family: var(--h5p-theme-font-name);
}

4. Click on the "Publish" button.

Please note though that your WordPress theme can spill into H5P.QuestionSet content and other styles might be off, too, because they migth be impacted by the WordPress theme.

I am going to move your issue to the "Verified by Community Maintainer" column of H5P Open Source Project as soon as possible. I was made a community maintainer just a few days ago and still lack some administrative powers. Once that is done, H5P Group will prioritize the ticket and move it forward.

Background

The cause of this issue has two aspects.

H5P.Question does not specify embedTypes (see specification) in its library.json file (see source on github).

On the one hand, that means that the content DOM it susceptible for CSS spill from the WordPress page.

More importantly, however, H5P core only sets the font-family to "Inter" including approptiate font-weights in connection with the class h5p-iframe (see source on github).

html.h5p-iframe .h5p-theme,
html.h5p-iframe > body .h5p-theme,
.h5peditor .h5p-theme {
  font-family: var(
    --h5p-theme-font-name
  ); /* Use the browser's default sans-serif font. (Since Heletica doesn't look nice on Windows, and Arial on OS X.) */
}

That class is, only set when H5P content lives inside an iframe. Hence, the font that is used to display does not ship with proper font-weights, and therefore bold text looks like plain text.

All in all a very tiny issue - one line fix.

Suggested fix

This could be fixed in H5P core by using .h5p-container.h5p-theme as selector (which would be correct for both, content types that use iframe and content types that use div) and the setting font-family: var(--h5p-theme-font-name);.

However, since CSS spill can cause other issues as well that content type cannot always control, the better approach would IMHO be to add "embedTypes": ["iframe"], to the library.json of H5P.QuestionSet, so it would use an iframe like almost every other content type.

[apienk]

@otacke Thank you for the quick reaction and congratulations on becoming the community manager! The H5P team could not choose better!

Unfortunately, the workaround you proposed does not work for me. I can see the variable being set in the iframe code but it doesn't change anything. Hopefully, the change in library.json helps.

I use default theme Twenty Nineteen on Wordpress 7.0.

[otacke]

@apienk Could you give me the URL to your site, please, maybe to a post with content? As I mentioned, other CSS from WordPress could spill into H5P and cause more trouble.

[apienk]

Interestingly, the workaround works on the website (as seen here), just doesn't work in the backend (screenshot).

[otacke]

The backend likely receives a different set of styles that overrides the H5P content in a different way. Will be fixed once QuestionSet uses an iframe (and proves my point in my suggestion to the H5P core team "However, since CSS spill can cause other issues as well [...]").