段落・折り返し

hyphenate-character

hyphenate-character は、単語を行の途中で区切ったときに、区切った所に出す文字(ふつうはハイフン)を指定します。

構文

auto | <string>

プレビュー

Internationalization needs extra­ordinary typo­graphic care.
プリセット
右下の角をドラッグするとサイズを変えられます

コード

.box {
  hyphens: auto;
  font-size: 28px;
  hyphenate-character: "=";
}

コントロール

hyphenate-character"="
hyphenate-character
Internationalization needs extra­ordinary typo­graphic care.

解説

値の意味

  • auto:初期値です。文章の言語の慣習に合った文字を、ブラウザが選びます(英語ならハイフン)。
  • "=" のような文字列:区切った所に、その文字列を出します。

使いどころ

区切りの印を、ハイフンとは違う文字にしたいときに使います。例えば、昔のドイツ語の組版で使われた二重ハイフン("⸗")や、等号で代用した "=" にできます。

気をつけること

  • 区切るかどうかは hyphens で決まり、この文字が出るのは区切った所だけです。hyphens: manual(初期値)ではソフトハイフン(&shy;)の所、auto ではそれに加えてブラウザが辞書で選んだ所で区切ります。none では区切らないので出ません。
  • 文字によっては、使っているフォントに字形がなく、別のフォントで表示されることがあります。
  • Safari 16 以前は -webkit-hyphenate-character と接頭辞を付けた名前でだけ対応しています。

このページのプレビューでは、補助の宣言で自動で区切るようにし(hyphens: auto)、長い単語が行に収まらないくらい文字を大きくしています(font-size: 28px)。英文の extraordinary と typographic には、区切ってよい所にソフトハイフンを入れてあります。

コメント