gbif / portal16

GBIF.org website
https://www.gbif.org
Apache License 2.0
24 stars 15 forks source link

Chinese typography - no italics #1482

Open ckotwn opened 3 years ago

ckotwn commented 3 years ago
Screen Shot 2021-01-22 at 18 45 39

Hope the summary line on web pages can have a conditional styling for Chinese. There is no italics in Chinese typography. Even nowadays word processors offer that feature, using italics in Chinese documents would be seen as unprofessional.

But please do when capacity allows. Thank you so much!

MattBlissett commented 3 years ago

On the document site, I have a CSS rule which might be useful:

  em:lang(zh), em:lang(ja) {
    font-style: normal;
    text-emphasis: dot;   /* But not for stylistic italics, like this heading! */
  }

The result is like this: https://docs.gbif-uat.org/collections-idea-paper/zh/#%E8%83%8C%E6%99%AF

The link "建立全球自然历史馆藏名录" shows the emphasis points, although AsciiDoctor doesn't yet have a way to omit them from "Sematophyllum marylandicum" in the previous section. (It can mark the whole document as Chinese, but as far as I know it can't generate <em lang="la">Sematophyllum marylandicum</em>, which would be necessary here.)

MortenHofft commented 3 years ago

Hi @ckotwn I wouldn't know how to do this as a general solution for any text on the website. But I can make a qualified guess for articles like this one. But the best general solution would be, if you could recommend me a better font to use for Chinese, that didn't allowed for meaningless italics. Can you recommend any please? Thank you

MattBlissett commented 3 years ago
  :lang(zh):not(i), :lang(zh-tw):not(i), :lang(ja):not(i) {
    font-style: normal !important;
  }

This would match everything on Chinese pages except scientific names.

However, that includes as-yet-untranslated pages.

For me, the font used is the system fallback. It would be possible to set a @font-face for Chinese text, but specify a regular font in the italic definition:

@font-face {
  font-family: 'Noto Serif TC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notoseriftc/v8/XLYgIZb5bJNDGYxLBibeHZ0BhnJsUnN3PrBufRbmGqUtcg4pzRPk5AEpzv6YzI9aTbOhf6M.6.woff2) format('woff2');
  unicode-range: U+ff78-ff7e, U+ff80-ff86, U+ff89-ff94, U+ff97-ff9e, U+ffb9, U+ffe0-ffe3, U+ffe9, U+ffeb, U+ffed, U+fffc, U+1d7c7, U+1f004, U+1f0cf, U+1f141-1f142, U+1f150, U+1f154, U+1f158, U+1f15b, U+1f15d-1f15e, U+1f162-1f163, U+1f170-1f171, U+1f174, U+1f177-1f178, U+1f17d-1f17f, U+1f192-1f195, U+1f197-1f19a, U+1f1e6-1f1f5, U+1f1f7-1f1ff, U+1f21a, U+1f22f, U+1f232-1f237, U+1f239-1f23a, U+1f250-1f251, U+1f300, U+1f302-1f319;
}

@font-face {
  font-family: 'Noto Serif TC';
  font-style: ITALIC;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notoseriftc/v8/XLYgIZb5bJNDGYxLBibeHZ0BhnJsUnN3PrBufRbmGqUtcg4pzRPk5AEpzv6YzI9aTbOhf6M.6.woff2) format('woff2');
  unicode-range: U+ff78-ff7e, U+ff80-ff86, U+ff89-ff94, U+ff97-ff9e, U+ffb9, U+ffe0-ffe3, U+ffe9, U+ffeb, U+ffed, U+fffc, U+1d7c7, U+1f004, U+1f0cf, U+1f141-1f142, U+1f150, U+1f154, U+1f158, U+1f15b, U+1f15d-1f15e, U+1f162-1f163, U+1f170-1f171, U+1f174, U+1f177-1f178, U+1f17d-1f17f, U+1f192-1f195, U+1f197-1f19a, U+1f1e6-1f1f5, U+1f1f7-1f1ff, U+1f21a, U+1f22f, U+1f232-1f237, U+1f239-1f23a, U+1f250-1f251, U+1f300, U+1f302-1f319;
}
ckotwn commented 3 years ago

Thanks, @MattBlissett & @MortenHofft, for prompt answering. I find that even a typeface that doesn't have any italics, like Noto Serif TC, it seems it could still be "slanted" by the CSS rule. The '@font-face' rules seems worth a try, hope it's not too much a hassle. Or, considering:

  1. Language-specific visitors don't usually switch language and compare;
  2. The typeface of the summery text is already different from the title and body text

The ':lang()' rule should be good enough?