Language-dependent styling

Using classes to apply different formatting depending on language needs.

by Manuel Souto Pico

HTML

<h1>
Language-dependent formatting
</h1>

<p>
The following sections stand for different files in different languages. Text below will be emphasized using different styles depending on the requirements of the language.
</p>

<p>
English source uses uppercase and italics, whereas Japanese wants to indent the text (instead of italics aand uppercase). This is a real example documented in PISA 2021.</p>

<p>Other (fictitious) examples are provided to show how classes can be used to apply language-relative styles when the target language doesn't want to use the original formatting.</p>

<section lang="en-US">
  <p>English:</p>
  <div id="parent">
    <div class="em">
      Source text.
    </div>
  </div>
</section>

<section lang="ja-JP">
  <p>日本:</p>
  <div id="parent">
    <div class="em">
      ソーステキスト。
    </div>
  </div>
</section>

<section lang="ar-SY">
  <p>العربية:</p>
  <div id="parent">
    <div class="em">
      هذه المترجمة.
    </div>
  </div>
</section>

<section lang="zh-Hans-HK">
  <p>中国人:</p>
  <div id="parent">
    <div class="em">
      这是翻译。
    </div>
  </div>
</section>

<h2>
References
</h2>

<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:lang">https://developer.mozilla.org/en-US/docs/Web/CSS/:lang</a></li>
<li><a href="https://www.w3.org/International/questions/qa-css-lang">https://www.w3.org/International/questions/qa-css-lang</a></li>
<li><a href="https://www.w3.org/International/i18n-tests/results/lang-selectors">https://www.w3.org/International/i18n-tests/results/lang-selectors</a></li>
<li><a href="https://chenhuijing.com/blog/css-for-i18n/">https://chenhuijing.com/blog/css-for-i18n/</a></li>
<li><a href="https://stackoverflow.com/a/73487441/2095577">https://stackoverflow.com/a/73487441/2095577</a></li>
</ul>

<h2>
To-do
</h2>

<ul>
<li>Find out how to match the script subtag only, e.g. <code>Cyrl</code> in <code>bs-Cyrl-BA</code> or <code>Hans</code>...

CSS

/*Code for en language*/
:lang(en) > .em {
  text-transform: uppercase;
  font-style: italic;
}

/*Code for ar language*/
.em:is(:lang(fa), :lang(ur), :lang(ar), :lang(tg), :lang(ps)) {
  text-decoration: underline;
  font-style: italic;
}

:lang(zh-Hans-HK) > .em {
  font-weight: bold;
}

.em {
  margin-left: 50px;
}

/*Code for en language*/
:lang(ja) > .em {
  text-indent: 5em;
}