Upper cases vs. styles for emphasis

by Manuel Souto Pico

HTML

<h3>Using upper case to emphasize</h3>

<div lang="en">
<blockquote>We use EMPHASIS to highlight something important.</blockquote>
<p>Using upper case (as above) to emphasize part of the text 
  works well for languages that have case distinction (lower vs upper)
  like all languages that use the Latin, Greek or Cyrillic scripts. 
  However, other languages such as Arabic, Japanese or Chinese need to
  use formatting to create the same effect.</p>
</div>

<h3>Using styles to emphasize</h3>

<div lang="en">
  <blockquote>We use <span class="text-emphasis">emphasis</span> to highlight something important.</blockquote>
  <p>On the other hand, you may use CSS styles to produce the same 
    effect, as you can see here right above, and at the same time 
    allow the same class to be used to assign a different form of 
    emphasis in translations in languages that don't use the Latin,
    Greek or Cyrillic scripts. See examples below (the emphasized part is in blue for clarity).</p>
</div>

<div lang="zh-Hans-HK">
  <p>In simplified Chinese, we may want to use, say, bold and underlining to create emphasis</p>
  <blockquote>我们使用<span class="text-emphasis">格式化</span>来突出显示重要内容。</blockquote>
</div>
<div lang="ja-JP">
  <p>In Japanese, we may want to use, say, bold, italics and underlining to create emphasis</p>
  <blockquote>私たちは重要な点を強調するために<span class="text-emphasis">書式設定</span>を利用します。</blockquote>
</div>
<div lang="ar-SY">
  <p>In Arabic script, we may want to use, say, italics and underlining to create emphasis</p>
  <blockquote>نستخدم <span class="text-emphasis">التأكيد</span> لتسليط الضوء على شيء مهم.</blockquote>
</div>

CSS

/*Code for English*/
:lang(en) > .text-emphasis {
  text-transform: uppercase;
}

/*Code for Arabic-script languages*/
.text-emphasis:is(:lang(fa), :lang(ur), :lang(ar), :lang(tg), :lang(ps)) {
  text-decoration: underline;
  font-style: italic;
  color: blue
}

:lang(zh-Hans-HK) > .text-emphasis {
  text-decoration: underline;  
  font-weight: bold;
  color: blue
}

/*Code for en language*/
:lang(ja) > .text-emphasis {
  text-decoration: underline;  
  font-weight: bold;
  font-style: italic;
  color: blue
}

blockquote {
  font-size: 1.2rem;
}

* {
  font-family: Times
}