"Strong" text is no different from regular text

[nathancarter]

Describe the bug
Text marked with <strong>...</strong> (obtained by **...** in Markdown in jupyter-book) looks just like regular text.

To Reproduce
Steps to reproduce the behavior:

1. Surround some text in a jupyter-book project with double asterisks.
2. Compile the project to a book.
3. Visit the generated website in the browser.
4. Notice that the marked text does not appear different from the surrounding text.
5. Inspect the text using the browser's developer tools.
6. Note that, while there are indeed <strong>...</strong> tags around the text.

Expected behavior
Strong text should appear emphasized, typically using bold.

The screenshot below was generated from the following Markdown:

## Functions

**Definition:** A *function* is any method for taking a list of inputs and determining the corresponding output.

Environment (please complete the following information):

• Python Version 3.7.3
• Output of pip show jupyter-book says the version is 0.7.0b4.dev0

[nathancarter]

Just realizing I should probably have filed this in the sphinx-book-theme repo...

[chrisjsewell]

I transferred it 😄

[choldgraf]

Hmmm, I just tried this on the latest jupyter book and it worked fine for me, this is what I got:

can you try upgrading jupyter book pip install -U jupyter-book and re-building?

(also after you upgrade you should be able to do jupyter-book --version)

[nathancarter]

This did not solve the problem for me.

$ jupyter-book --version
Jupyter Book: 0.7.0
MyST-NB: 0.8.1
Sphinx Book Theme: 0.0.23
MyST-Parser: 0.8.1
Jupyter-Cache: 0.2.1

[choldgraf]

Hmmm, I am not sure what to tell you, it's hard to fix without being able to reproduce the bug. Could you post a link to a website you've built where this issue shows up? As well as the repo?

[nathancarter]

Sure.
Page: https://nathancarter.github.io/MA346-course-notes/_build/html/chapter-2-mathematical-foundations.html
Repo: https://github.com/nathancarter/MA346-course-notes

[choldgraf]

hmm, could this be a browser issue? this is what I see:

[chrisjsewell]

Yep same here. @nathancarter a good way to check out the page styling is using the Firefox inspector. As you can see below the word is given the bolder styling.

Note it is also possible to add configuration to jupyter-book/sphinx to override the default CSS

[nathancarter]

OK that's helpful, but I have to confess I'm completely confused about something else now.

I took your suggestion, created a custom CSS file in my _static folder, as the jupyter-book docs say to do:

b, strong {
    font-weight: bold;
}

I then rebuilt the book and used the Chrome dev tools to verify that the <strong>...</strong> tag now has its font weight set to bold due to my custom CSS file.

And yet the page looks exactly the same in Chrome, but looks correct in Firefox.

I'm at a loss. I realize this is not a jupyter-book problem, but if you've got any thoughts based on your knowledge of the styles and tools involved, I'd love to hear!

[najuzilu]

Interestingly I get something similar with @nathancarter.

Here's a screenshot of an example:

Now, here's what the same text looks like when I remove the font-family Lato,sans-serif:

[choldgraf]

oh ho - maybe it's a fonts issue!

[nathancarter]

This definitely seems like progress, but I confess that I don't know what to do to solve my problem (which is to make it show up on all browsers). Should I be changing the theme to use a different font?

[choldgraf]

well, it's tough to say because it sounds like it is dependent on the user's computer. I think one thing to try is make sure that the fonts used by sphinx-book-theme are on your computer. If not, then install them and see if that fixes it so we can pinpoint the issue. If SBT is using something non-standard then we should switch to whatever the standard is.

[nathancarter]

I'd want to be sure that anyone viewing my book sees the style as intended, so if there's even a possibility that any normal computer (such as my Mac) doesn't have the fonts to see the styles in my code, I'd want to use a different style.

[choldgraf]

For sure - we just need to pinpoint what is the style issue that's causing this problem, so that we know what to fix

[pradyunsg]

This seems to have been fixed by pydata/pydata-sphinx-theme#222.

[choldgraf]

yep, we just need the pydata theme to release a new version, then bump its dependency in the SBT and we should be good-to-go

[chrisjsewell]

I believe this is now fixed in by pydata-sphinx-theme v0.4

[nathancarter]

Yes. Somehow I thought I had replied somewhere and confirmed that this was fixed for me, but I can't find my reply right now. Either way, thank you all--works great!

[spring-haru]

I use Github Action to deploy the website, and started having the same problem - bold texts are not different from regular ones. I do not specify versions in requirements.txt. On the other hand, NO problem arises if I open locally built html files. Just in case, I added the following in `requirements.txt' for Github Action

sphinx == 3.4.3
sphinxcontrib-serializinghtml == 1.1.4
sphinx-book-theme == 0.1.0

which are equivalent to the environment I used to locally create html files. But no difference.

When I open the Github Action-created website, it shows bold texts correctly but for less than half second, and then those texts turn quickly "regular".

[EDIT]
Safari, Chrome and Firefox on macOS Big Sur