の強調と傍点と、text-emphasisと非対応ブラウザ対策

HTML にはというタグがありますよね。

このタグはテキストを「強調」や「強勢」するときに使われます。

そして欧文ではイタリック体がテキストの強調などを表しているので、このタグで囲まれたテキストはブラウザデフォルトの指定ではだいたいイタリック体になっています。

でも日本語の文で強調を表す場合、斜めにはあまりなりませんよね？

今回はそんなことを、備忘録として記事にまとめてみます。

あ、ちなみに「em」は「emphasis」の略で、強調、重点、強勢といった意味があります。

と
- 
-
傍点と text-emphasis
text-emphasis 非対応ブラウザへの対策
で、結局どうしたか

と

「強調する」といったらもう一つタグを思い出しますね。そうタグです。

この二つは同じでしょうか？違うのでしょうか？

この違いは実はネットで探せばいっぱい出てきます。ちょっと前のはてなブックマークでもそのことが書かれた記事がホッテントリしていましたし、それ以外にも多くのサイトで言及されています。

いくつかリンクをあげておきますと

多すぎて混乱してしまいますが、簡単にまとめますと次のような感じかと思います。

こちらはどうやら「強調・強勢」といった意味みたいです。

強調や強勢とは何かと言えば、文字通りニュアンスを変えることで文の意味を変えるのが、このタグの役割のようです。

和文では文字の上に点々がある語句（傍点）が強調といった感じなので、これに近いんじゃないでしょうか。

こちらは強い重要性や深刻さ、緊急性を表す時に使います。

先ほどのとの大きな違いは、使ったときその文の意味を変えないというという所です。

この二つが違う、ということは分かりますが、どう違うかがちょっと分かりにくい。つまり使い所が混乱してしまいます。

わたしの場合、は、その部分を強調することで意図した通りに文章を相手に伝えたいときに使用したいと思います。

それに対しは、その語句や文自体に強い重要性がある時に使用するようにしようと思います。

傍点と text-emphasis

欧文での強調・強勢はイタリック体でもいいのですが、和文だと何だか微妙な感じがします。

またフォントのメイリオなどではイタリック体自体がありません。で囲っても何の変化も無いのです。

ここはやはり、先ほども書きましたが和文では強調や強勢といったことを表す「傍点」のほうが望ましいと感じます。

参考リンク：圏点 - Wikipedia

この傍点を表現するのにはtext-emphasisという CSS を指定すれば実装できます。

リンク：text-emphasis - CSS: カスケーディングスタイルシート | MDN

実際に指定するとすれば、このようになります。

em {
    font-style: normal;
    -webkit-text-emphasis: dot;
    text-emphasis: dot;
}

ただ、このプロパティはこの記事の執筆時点（2017年10月18日）では Edge と IE には対応していません。

リンク：Can I use... Support tables for HTML5, CSS3, etc

このことから、非対応ブラウザへの対策を考えなければいけません。

text-emphasis 非対応ブラウザへの対策

非対応ブラウザへの対策は @ 規則の@supportsを利用します。

先に非対応のブラウザ向けのスタイルを指定した後、text-emphasisが使えるブラウザのスタイルを設定するといった感じです。

ここで問題になるのが、傍点以外の強調や強勢の表示方法です。

調べたところ、次のようなものがあります。

傍線

傍点と同じような表現方法として「傍線（ぼうせん）」があります。

リンク：傍線 - Wikipedia

要は強調する部分の上か下に線を引くことです。

ただ、HTML で下線といえばリンクになりますので、ユーザーへの配慮のことを考えたら、紛らわしい下線は避けるべきです。

ただし、よくありますがマーカーで線を引いたような下線のように、リンクだと間違わないようなデザインというのもできます。

カギカッコ

カギカッコ（鉤括弧）で語句を強調するのは、よくある方法です。

実はカギカッコ以外で、丸い普通のカッコ以外のカッコ（二重カギカッコや山ガッコなど）など、その大半は強調として使えるみたいです。

ただ強調には適していますが強勢には向いていないように感じます。

難しいところです。

太字

太字も強調を表す方法として代表的なものです。

ただ、太字は重要性を表すも同じです。意味は違うのに見た目は同じ表現方法は、あまりよろしくないように感じます。

ただ、傍点を表示できないのは Windows 系のブラウザだけなので、text-shadowを利用して擬似的に少しだけ太文字にするといった方法などでとの違いを付けるという方法も考えられます。

引用符

いわゆる“ “といった引用符です。これも強調として使われることがあります。

リンク：引用符 - Wikipedia

ただし、カギカッコ内の二重引用など他の用途で使われることもあるので、使い所によっては意味が正しく伝わらない可能性があります。

あと「背景画像をうまく利用して傍点みたいに見せる方法」や「画像を使って下に波線を引く」という方法も考えたのですが、どれも決め手に欠けるというか、悩みます。

いったい、どれがいいのでしょうか？

で、結局どうしたか

最終的に決めた方法は、このようなものです。

em {
    font-style: normal;
}
em::before {
    content: "“";
    speak: none;
}
em::after {
    content: "”";
    speak: none;
}

@supports ( text-emphasis: dot ) or ( -webkit-text-emphasis: dot ) {

  em {
    -webkit-text-emphasis: dot;
    text-emphasis: dot;
  }
  em::before,
  em::after {
    content: "";
  }

}