Proper italic/cursive rendering

[HipyCas]

Describe the bug

As of now, if you format text as italic/cursive (with either _ or *) it gets transpiled to HTML as an <em> element, instead of <i>. This works in chromium-based browser (as far as I've seen), but for example doesn't show as italic in the latest Firefox versions.

Reproduction

In a Markdown file, wrap any text in a single _ or * (make it cursive), compile and search that text in the page with Firefox.

Expected behavior

Render it to an <i> tag so it is properly formatted in both Chromium-based and Gecko-based (Firefox & others). Alternatively, a CSS could be included by default that formats <em> as italic/cursive.

System Info

System:
  OS: Linux 5.15 Pop!_OS 21.04
  CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
  Memory: 5.75 GB / 15.48 GB
  Container: Yes
  Shell: 5.1.4 - /bin/bash
Binaries:
  Node: 16.4.1 - ~/.nvm/versions/node/v16.4.1/bin/node
  npm: 8.9.0 - ~/.nvm/versions/node/v16.4.1/bin/npm
Browsers:
  Chromium: 102.0.5005.61
  Firefox: 96.0
npmPackages:
  vitepress: ^1.0.0-alpha.1 => 1.0.0-alpha.1

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Hi! This is a part of the CommonMark Spec. We cannot change the standards. _ or * are not meant for italics, they are for emphasis (although most browsers style the contents as italics). <i> too doesn't mean italics, its "idiomatic text". Quoting MDN:

Typically this element is displayed in italic type. However, it should not be used to apply italic styling; use the CSS font-style property for that purpose.

[brc-dd]

Okay, so this issue is not due to different CSS engine in Firefox. Our italics font is not loading there. Just for test, try setting a different font on em, it will be italics there too. We will fix this. Thanks for the report.

We don't have an italic font face. 😅 In Chrome it works because it falls back to other fonts.

[noClaps]

Using Chromium on Fedora, italics don't seem to work for me.

[HipyCas]

Thanks for the quick answer @brc-dd! I know that <i> is not meant for italics technically speaking, but it is actually used for it in as far as I know all modern browsers, so that's what I proposed that solution.

Given that the problem lays in the font used, I guess the default font should be changed to support italics by default? I don't believe that people should manually change the font to one with italics support if they want italics.

Also, I would add a CSS to ensure that the <em> element gets proper italic formatting, just in case some browser decides that it isn't going to style it like that.