Italics not supported by default?

[nk9]

Description

I have text which uses italics. This is done with the underscore in Markdown, and the generated HTML uses the <em> tag. But the output doesn't show the italic text.

Steps to reproduce

Just use underscores to generate some italic text anywhere in page content. E.g.

Is the whale _dead_?

Actual result

Environment

{
  'doks-child-theme': '0.3.5',
  npm: '8.3.0',
  node: '17.2.0',
  v8: '9.6.180.14-node.12',
  uv: '1.42.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.18.1',
  modules: '102',
  nghttp2: '1.46.0',
  napi: '8',
  llhttp: '6.0.4',
  openssl: '1.1.1l',
  cldr: '39.0',
  icu: '69.1',
  tz: '2021a',
  unicode: '13.0'
}

[h-enk]

Can't reproduce this. For me, with the doks child theme, both npm run start and npm run build show the <em> tag like expected,

You could try adding the <em> tag to the safelist in ./config/postcss.config.js.

Would you mind sharing your repo?

[nk9]

Oh, very strange. This is happening on Firefox, but I see Safari and Chrome both working as expected. Adding the em tag to postcss.config.js doesn't fix the problem.

I'm on the most recent version of Firefox, 96.0, on macOS 11.6.2 (20G314).

Any other ideas what could be wrong?

I've added you to the theme, although you may not need it if you can see the issue in Firefox too. TBH, I haven't changed much in the theme yet.

[h-enk]

Strange, indeed. It works for me (with a fresh doks child theme) on Firefox 96.0.1 (64bit), on Windows 10 Pro 21H2 19044.1466

So, it looks like something with the combination Firefox - macOS.

[h-enk]

Note, that the markdown gets converted correctly (see you screenshot). So, it's got to do something with the way Firefox (in combination w/ macOS) interprets the <em> tag.

[h-enk]

I'm closing this issue, for this is out of scope for Doks.

[nk9]

First of all, the reason the <h1> isn't being italicized is because it's a header. Most browsers seem to ignore <em> in headers, even when using the default font.

The problem with the italic in the body text, though, is with different browsers' interpretation of the font names used in the CSS. When I change the font-family for the 3 italic sizes here to "Jost-Italic", the result is this:

When I instead change the value of the first part of the src: attribute to local("Jost-Italic") the result is this:

The second one seems to be using the actual font instead of just italicizing the roman version, since Jost changes to a single-story a in the italic version:

With that in mind, I'll submit a PR to address this.

[h-enk]

Thanks! Your PR is welcome!