文字の装飾

quotes

quotes は、引用を表す <q> 要素の前後に付く、かぎかっこや引用符の文字を指定します。開きと閉じの組を、入れ子の深さごとに並べて書きます。

構文

none | auto | [ <string> <string> ]+

She said, He told me hello.
母は父がおはようと言ったと話した。

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  quotes: "«" "»" "‹" "›";
}

She said, He told me hello.
母は父がおはようと言ったと話した。

auto：初期値です。ブラウザが言語に合った引用符を選びます。日本語なら「」と『』、英語なら “” と ‘’ です。
none：引用符を出しません。
"「" "」" "『" "』"：開きと閉じの文字を 2 つずつ組にして書きます。1 組目がいちばん外側の引用、2 組目がその中の引用に使われます。入れ子が組の数より深いときは、最後の組をくり返します。

プレビューでは、q を 2 段に入れ子にした英語の文と日本語の文を並べています。auto では文ごとに違う引用符になり、文字列を書くと両方が同じ引用符にそろいます。

サイトの表記の決まりに合わせて、q の引用符をそろえるときに使います。たとえば英語の文章でも、引用をかぎかっこで囲みたいときです。

引用符を出すのは、content に open-quote と close-quote を書いた所だけです。q の前後はブラウザがはじめからそう書いているので、quotes を書くだけで変わります。blockquote には付きません。
auto は 親の要素の言語で選びます。英語の文の中の <q lang="ja"> は、自分の引用符は英語の “” になり、その中に入れ子にした q から『』になります。
引用符は ::before と ::after に出る文字なので、文章を選んでコピーしても含まれません。none にすると、見た目では引用だとわからなくなるので、別の方法で区別できるようにします。
auto は Chrome・Edge 87、Firefox 70、Safari 14.1 からです。それより前のブラウザでは、ブラウザが決めた引用符が使われます。