CSS3

：

プロパティ

：

quotes

　編集：2022.07.14 by T.A.

引用符の指定法。

名前	`quotes`
値	auto \| none \| [<string> <string>]+
初期値	auto
適用対象	すべての要素
継承	される
百分率	受容しない
算出値	指定されたキーワード／各アイテムが文字列値のペアであるリスト
正準的順序	文法に従う
アニメーション型	離散的

ユーザーエージェントには、視覚的でないものも含め、どの媒体でもこのプロパティをサポートすることが期待される。

このプロパティは、埋め込み引用文用の引用符を指定する ― 必要な入れ子深さに応じて、いくつでも。

none

content プロパティの［ open-quote／close-quote ］値が［ no-open-quote／no-close-quote ］であったかのように、引用符を生産しない。

開始<Q style="border:1px solid black;
">テスト</Q>終了<BR>
開始<Q style="border:1px solid red;
 quotes:none;
">テスト</Q>終了<BR>

auto

quotes 用のタイポグラフィック的に適切な使用値は、要素やその親の内容言語に基づいて、ユーザーエージェントにより自動的に選ばれる。

注記：タイポグラフィック的に適切な引用符についての情報は、[CLDR] に保守されている。ユーザーエージェントは、他の情報源も利用できる ― 特に、タイポグラフィック選好は変わり得るので。しかしながら、改善があれば、ソフトウェアエコシステム全体の便益になるよう、Unicode へ提出することが奨励される。

開始<Q style="border:1px solid red;
 quotes:auto;
">テスト</Q>終了<BR>

[<string> <string> ]+

content プロパティの［ open-quote／close-quote ］値用の値は、このリストを成すいずれかの（開き、閉じ）引用符ペアからとられる。1 個目のペアは最外縁レベルの引用文を表現し、2 個目のペアはその子レベルの埋め込みを表現する、等々。ユーザーエージェントは、埋め込みレベルに則って、適切な引用符ペアを適用するものとする。

以下のCSSが組み込んであります：

開始<Q style="border:1px solid red;
 quotes:'〈' '〉';
">テスト</Q>終了<BR>

開始<Q style="border:1px solid red;
 quotes:'〈' '〉' '｛' '｝';
">テ<Q>ス</Q>ト</Q>終了<BR>

開始<SPAN style="border:1px solid red;
 quotes:'〈' '〉' '｛' '｝';
">テ<SPAN>ス</SPAN>ト</SPAN>終了<BR>

Q要素以外はだめ？

開始<SPAN class=T_Siki3 style="border:1px solid red;
">テスト</SPAN>終了<BR>
開始<SPAN class=T_Siki3G style="border:1px solid red;
">テスト</SPAN>終了

Q要素以外はだめ？

開始<BLOCKQUOTE style="border:1px solid red;
 quotes:'○' '◎';
">テスト</BLOCKQUOTE>終了

Q要素以外はだめ？

この引用符法の深さは、ソース文書や整形構造の入れ子とは独立であることに注意。

注記：引用符の入れ子は、カウンターの継承の様に、[DOM] の文脈における“平坦化された要素ツリー”【参照】に対し演算する。

一部のタイポグラフィックスタイルでは、引用文が何段落かにわたる場合に、開き引用符は各段落ごとに繰り返す一方で、最後の段落のみ閉じ引用符で終端することが要求される。CSS においては、これは“見えない”閉じ引用符を挿入して達成できる。キーワード no-close-quote は、引用符法のレベルを減らすが、引用符は挿入しない。

例えば、次のスタイルシートを適用した場合：

/*  2 つの言語における 2 つのレベル用に， 2 つの引用符ペアを指定する。  */
:lang(en) > q { quotes: '"' '"' "'" "'" }
:lang(no) > q { quotes: "«" "»" "’" "’" }

/*  q 要素の内容の前, 後に引用符を挿入する  */
q::before { content: open-quote }
q::after  { content: close-quote }

次の HTML 片は：

<html lang="en">
  <head>
   <title>Quotes</title>
  </head>
  <body>
   <p><q>Quote me!</q></p>
  </body>
</html>

次を生産することをユーザーエージェントに許容する：

一方で、次の HTML 片は：

<html lang="no">
  <head>
   <title>Quotes</title>
  </head>
  <body>
   <p><q>Trøndere gråter når <q>Vinsjan på kaia</q> blir deklamert.</q></p>
  </body>
</html>

次を生産することになる：

スクリプト：

スクリプト：

CSS3

プロパティ

quotes

関連

テスト