2

Linux 上の firefox, chromium で確認しています.

HTML で q タグを使うときに,これらのブラウザはうまく引用符をつけてくれ,css などで何も設定がないと, html の lang を見てくれるようです.(例えば <html lang="ja"> な文章の中で <q>引用</q> があると,「引用」と括弧をつけて表示される.)

全体として日本語の文書の中で英語の引用をしたいとき, <q lang="en">quote</q> という形で書けばうまく行くのではないかと思いましたが,どうも q の一つ親の要素に lang を設定しないとうまくいかないように見えます.

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8"> </head>

<body>

  <q> qタグだけ </q>
  <!-- 「qタグだけ」 -->

  <q lang="en">q で lang を設定する</q>
  <!-- 「q で langを…」 -->

  <div lang="en"><q>langを div につけてクオート</q></div>
  <!-- “lang を div に…” -->

  <q lang="en">lang=en な q <q> のなかにもう一段</q> </q>
  <!-- 「lang=en な q ‘のなかにもう一段’」-->

</body>

</html>

https://jsfiddle.net/9j57wexn/

質問:

  • 「一つ親の要素に設定が必要」という理解はあっているのでしょうか.<q lang="en">Quote</q> が英語として扱われないのはちょっと変な気がしています.
  • そうだとしたら,日本語の文章の中に英語の引用を混ぜ込む場合(例えば,John 自体が <q>This work was nicely done.</q>と述べている. と書きたいような気分のとき),lang を指定するためにどの要素を q の親要素に選ぶのが自然か,というのがもしあれば知りたいです.

2 件の回答 2

3

ブラウザのデフォルト引用符のルール

ブラウザのデフォルト引用符は、地の文(引用する側)の言語設定に従います。

Note that the lang attribute was placed on an ancestor of the <q>, not the <q> itself. If a quotation is in a different language than the surrounding text, it is customary to quote the text with the quote marks of the language of the surrounding text, not the language of the quotation itself.

—— MDN / quotes / Auto quotes

(訳) lang属性は <q> 自体ではなく、<q> の祖先に設定されていることに注意してください。引用が周囲のテキストと異なる言語である場合、引用自体の言語ではなく、周囲のテキストの言語の引用符でテキストを引用することが慣習です。

(これは、仕様に元づいたものと思われます)

「一つ親の要素に設定が必要」か

よって、CSSを使わずに質問者さんの希望を叶えるには、「一つ親の要素に設定が必要」という認識で正しいと思います。正確には、祖先の要素のいずれかに希望の言語が設定され、目的の箇所まで継承されていればよいです。

lang を指定するための親要素

lang を指定するためにどの要素を q の親要素に選ぶのが自然か,というのがもしあれば知りたいです.

見た目(装飾)の変更を行うためだけにHTMLの構造をいじる場合は、できるだけ意味的な変更を生じないように、divspan を使用するのが一般的だと思います。

CSSの使用

こういった場合にHTML構造を変更するべきかは、微妙です。

地の文と異る言語による文章を引用する際に、引用の形式(引用符の扱いなど)をどちらの言語に準じるかは、必ずしも自明なものでは有りません。

質問者さんは、引用先の言語の習慣に合わせるのが自然だとお考えのことと思います。しかし、ブラウザのデフォルト引用符はそうではなく、地の文に合わせるようになっています。ここで、ブラウザの作者とは引用の装飾に関する考え方、あるいは好みの違いが生じているわけです。

こういったブラウザのデフォルトの装飾が自分の扱っているコンテンツに不適だと思われる場合は、無理にHTML構造を曲げることをせずに、CSSで好きな装飾を当てるのも良い方法だと思います。

スタイル設定には、はoririさんの回答に有るものの他、quotes なども使えます。

/* ブラウザのデフォルトは、下記のようになっていると思われます */
:lang(en) > q {
    quotes: '“' '”' "‘" "’";
}
                                                                 
/* 自要素の言語設定に従わせるには、例えばこのようにできます */
q:lang(en) {
    quotes: '“' '”' "‘" "’";
}
1
  • 1
    引用する側の言語に従う,というのは完全に盲点でしたが,言われてみればそれはそれで一理ある感じがします.仕様やあえては構造を変更しない方針など,とても参考になりました.
    – Yosh
    Commented 6月23日 13:33
2

未確認だけど,
q要素を扱う文書にとってのくくり方, ということではないでしょうか?

日本語での「引用」は「〜」『〜』がよく使われるので (引用の中身は別にして)

上記の予想が正しければ, 文化の違いと考えることができるので, 仕様を元に使い方考慮するより
引用の中身の言語で文字を(引用符を)切り替えるように CSSを設定すればよいかも

q {
  font-style: italic;
  color: red;
}

q:lang(en-US)::before {
  content: '"';
}

q:lang(en-US)::after {
  content: '"';
}
<p lang="ja">
  When Dave asks HAL to open the pod bay door, HAL answers:

  <q lang="en-US" cite="https://www.imdb.com/title/tt0062622/quotes/?item=qt0396921&ref_=ext_shr_lnk">
    I'm sorry, Dave. I'm afraid I can't do that.
  </q>

  <q>テスト</q>
</p>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。