MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

CSSの”text-transform: capitalize”の振る舞いについて（和英混在文字列の場合）
https://forums.mozillazine.jp/viewtopic.php?f=30&t=10681		 ページ 1 ／ 1
作成者:  Vitz [ 2010年9月19日(日) 08:50 ]
記事の件名:  CSSの”text-transform: capitalize”の振る舞いについて（和英混在文字列の場合）
初めて質問いたします。

環境は以下の通りです。
OS：Windows7 Professional
ブラウザ：Firefox 3.6.10
Gecko：rv1.9.2.10

当方、只今学習のためHTMLとCSSをコーディングして動作を確認してみたり
しているのですが、題記の件で質問がございます。
例えば以下のような場合です。

[HTML]　←　DTDはTransitional、文字コードはUTF-8です。bodyだけ書きます。
<body>
<p><span class="cap">vitz</span></p>
<p>初めまして<span class="cap">vitz</span>と申します。</p>
</body>

[CSS]
@charset "UTF-8";
/* CSS Document */

p span.cap {
text-transform: capitalize;
}

上記のようなコーディングで実行表示させると、
英字のみの部分は先頭一文字が大文字化されますが、
和英混在の文字列の場合は”text-transform: capitalize”が
適用されず、小文字のままです。

ちなみに、和英混在の文字列の英字の先頭に半角spaceを入れると、
きちんと適用されるようです。
また、IE8では先頭に半角spaceを入れなくても適用されます。

これはFirefox(Gecko)の仕様でしょうか？
それともbugでしょうか？
(英語のbugzillaには記載があったのですが、和英混在の場合は
どうなっているのかがよくわかりません。)

有識者の方、お教えいただけると幸いです。
どうぞよろしくお願いいたします。
作成者:  Masayuki [ 2010年9月19日(日) 15:37 ]
記事の件名:  Re: CSSの”text-transform: capitalize”の振る舞いについて（和英混在文字列の場合）
興味深い話ですね。

実際にコードを確認していませんが、おそらくGeckoは空白類を単語の境目と考えています。そのため、二つ目の<p>要素内は一つの単語だと考えていると思います。

# 後ほど詳しく検証してみたいと思います。

ところで、オフトピですが、勉強中とのことなので、ひとこと。

このようなケースでは通常、<p>のスタイルに対してtext-transformをかけるべきだと思います。インラインレベルでスタイルを変更する、というのは文の一部を強調したいといった目的で利用し、ブロックレベルでデザインを行えばHTMLで無駄な要素を挿入する必要がなくなり、すっきりするでしょう。
作成者:  Vitz [ 2010年9月19日(日) 16:11 ]
記事の件名:  Re: CSSの”text-transform: capitalize”の振る舞いについて（和英混在文字列の場合）
Masayuki様

ご返信頂きありがとうございます。
もし検証をされました折には、当方にも結果をお教え頂けると幸いです。

Masayuki さんが書きました:
ところで、オフトピですが、勉強中とのことなので、ひとこと。

このようなケースでは通常、<p>のスタイルに対してtext-transformをかけるべきだと思います。インラインレベルでスタイルを変更する、というのは文の一部を強調したいといった目的で利用し、ブロックレベルでデザインを行えばHTMLで無駄な要素を挿入する必要がなくなり、すっきりするでしょう。


アドバイスありがとうございます。勉強になります。
その辺りもまだまだ勉強不足の身ですので、つたないコーディングにつきましてはどうかご容赦ください・・・。

ちなみにですが、今回のような和英混在でもスタイルとして”text-transform”をかけても問題はないという認識でよろしいのでしょうか？
（当方、”text-transform”は英字のみしか対象でないという認識でしたので、英字部分のみを"＜span＞"で囲ってしまいました・・・。）

併せてお教え頂けると幸いです。
作成者:  偶然的通行人 [ 2010年9月19日(日) 21:00 ]
記事の件名:  Re: CSSの”text-transform: capitalize”の振る舞いについて（和英混在文字列の場合）
横から失礼します。

text-transform というプロパティは、もともと大文字・小文字の区別がある言語でしか使えませんし、それらの言語であっても使う場面はけっこう限られたものだと思います。
当然、和文単独ではまったく使いどころのないプロパティです。

英文の場合、スペース（半角スペース）で単語を区切って文章を書くのがルールですから、
text-transform: capitalize;
を指定した場合、
行頭の単語を除き、文字列内の単語の先頭を判別する上で、単語の前にスペースが存在することは、ある意味で必然だと考えられます。

問題は和英混在文の場合ですが、これについての規定はちょっと思い当たりません。
　　｜ CSS に関する W3C の仕様書を探せばあるのかもしれませんが、
　　｜ そこまではやってません。
　　｜ もしかしたら現状では、レンダリングエンジンごとの解釈（仕様）
　　｜ に依存しているのかもしれません。

ちなみに、下記のような簡単な文書を、手持ちのブラウザで試した挙動は以下のようになりました。
コード:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <meta http-equiv="content-style-type" content="text/css">
   <meta name="content-language" content="ja">
   <title>Sample</title>
<style type="text/css">
<!--
   p.cap {
   text-transform: capitalize;
}
-->
</style>
</head>
<body>
<p class="cap">vitz</p>
<p class="cap">初めましてvitzと申します。<br>
firefoxユーザーです。<br>
当方、只今学習のためhtmlとcssをコーディングして動作を確認してみたり<br>
しているのですが、題記の件で質問がございます。
</p>
</body>
</html>

Internet Explorer 8.0 と Safari 5.0.2 は、このスタイルを適用します。
Firefox 3.6.10 と Opera 10.62 は、このスタイルを適用してくれません。
　（アルファベットの前にスペースを入れると、Firefox と Opera でも適用されます。）

この結果だけを見れば、ブラウザごとに実装が異なっているような印象です。

ご質問の答えになっていないと思いますが、とりあえずの参考まで。

（余談）
個人的には、Firefox や Opera の挙動のほうが理にかなっている気がします。根拠はありませんけど......（汗）。
和 + 英だけならまだしも、多様な複数の言語 / フォントの混在する文章の表示を、どのようなレンダリングエンジンであれ完全にユーザーの期待通りに描画することやその標準仕様を確定することは、（現状では）相当困難でしょうから、「文章を書く」という人間的な作業の段階で、書き手が使用言語の特性や制約に応じた書き方をする（または編集・整形する）ことも、Web ページの制作上は重要な観点かもしれませんね。
　　｜ HTML や CSS の書式だけで Web ページの品質が決まるわけでなく、
　　｜ コンテンツ（文章や画像など）の仕様や書き方・作り方、その品質も
　　｜ 度外視できないのではなかろうか、という意味でです。
作成者:  Masayuki [ 2010年9月19日(日) 21:19 ]
記事の件名:  Re: CSSの”text-transform: capitalize”の振る舞いについて（和英混在文字列の場合）
まず、日本語と中国語というのはメジャーな言語の中では特殊で、単語をスペースで分かち書きしません。これらの言語は幸い、大文字・小文字という概念が存在する欧米の言語の文字(つまりアルファベット)を使いませんので、アルファベットの部分だけ独立した単語であると解釈するべきだと私は思います。指摘がある通り、FxとOperaはこの処理を行っていませんが、IEとWebkit(Chrome/Safari)は行っていますし、こちらの方が好ましいと私は思います。

ここで難しいのがどのような文字が、日本語、もしくは中国語なのか、という点です。もちろん、仮名や漢字は全て含めれば良いのですが、記号が問題になってきます。IEとWebKitでもやはり解釈は割れていて、特にASCIIのレンジの記号の扱いが異なっています。

ちなみにCSS仕様では単語の切れ目というのは何も定義していません、というかやるべきではないですし、実際問題、できません。

とりあえずパッチ作成にトライしていますが、まだしっくりと来るものができていません。
作成者:  偶然的通行人 [ 2010年9月19日(日) 22:40 ]
記事の件名:  Re: CSSの”text-transform: capitalize”の振る舞いについて（和英混在文字列の場合）
Masayuki さん、ご教示ありがとうございます。
Vitz さん、トピ主を差し置いて失礼します。

Masayuki さんが書きました:
まず、日本語と中国語というのはメジャーな言語の中では特殊で、単語をスペースで分かち書きしません。これらの言語は幸い、大文字・小文字という概念が存在する欧米の言語の文字(つまりアルファベット)を使いませんので、アルファベットの部分だけ独立した単語であると解釈するべきだと私は思います。

なるほど、そういわれればそうですね。

ただ、日本語文内にある英単語（アルファベット）の前後のスペースを意識すべきだと思ったのには理由があります。
一般に、書籍などを作るために文章を組み上げる組版ソフトでは、日英混在の文章――とくに日本語の文章中に含まれる英単語にたいして、その前後にアキを挿入するコマンドが普通に存在します。ワープロソフトでも同様です。
単語としてはアルファベット部分だけを理解できればいいのですが、可読性を考慮した日本語（ベースの）組版を意識した場合、そのように処理されることがしばしばあります。（ただ、これも絶対的なルールが存在するわけではないので、デザイナーや組版オペレーターの裁量に左右されるのですが。）
この流れから、日本語と英語の混在文を書く段階で、日本語中の英単語の前後に半角スペースを入れるような書き方をする人も普通に存在します。（もちろん、そうでない人もいます。）

で、個人的には、HTML や CSS の解釈とその適用以前に、そもそも複数言語の混在テキストの書き方として英単語の前後のスペースを意識したほうが自然なのではないかと考えたわけです。テキストをそのように書けば、現状のどんなブラウザでも text-transform: capitalize; が適用されるわけですし......。
まあ、ぼく個人の仕事上の習慣からそう考えるのかもしれず、何が何でもこだわる気持ちはありませんし、他人に強要する気もありませんが...。

しかし、CSS の解釈――この場合、text-transform: capitalize; に限って考えると、
Masayuki さんが書きました:
アルファベットの部分だけ独立した単語であると解釈するべき

としたほうが、たしかに自然かもしれませんね。
text-transform は、あくまで大文字・小文字のコントロールに限る話であって、混在文の可読性まで視野に入れて論じるべきではありませんでした。失礼しました。

Masayuki さんが書きました:
ここで難しいのがどのような文字が、日本語、もしくは中国語なのか、という点です。もちろん、仮名や漢字は全て含めれば良いのですが、記号が問題になってきます。IEとWebKitでもやはり解釈は割れていて、特にASCIIのレンジの記号の扱いが異なっています。

ちなみにCSS仕様では単語の切れ目というのは何も定義していません、というかやるべきではないですし、実際問題、できません。

とりあえずパッチ作成にトライしていますが、まだしっくりと来るものができていません。

一般に言語（少数言語も含めて）の扱いは、歴史的・民族的な背景や長年の習慣もあるだけに、ひとつの「仕様」として割り切って簡単に「定義」してしまえるものでないことは、素人目に見ても想像できます。
そういう難しさをふまえて、それらの問題に取り組まれている開発者・関係者のみなさんには感謝しています。
作成者:  Vitz [ 2010年9月20日(月) 01:41 ]
記事の件名:  Re: CSSの”text-transform: capitalize”の振る舞いについて（和英混在文字列の場合）
Masayuki　様
偶然的通行人　様

返信ありがとうございます。

偶然的通行人 さんが書きました:
ただ、日本語文内にある英単語（アルファベット）の前後のスペースを意識すべきだと思ったのには理由があります。
一般に、書籍などを作るために文章を組み上げる組版ソフトでは、日英混在の文章――とくに日本語の文章中に含まれる英単語にたいして、その前後にアキを挿入するコマンドが普通に存在します。ワープロソフトでも同様です。
単語としてはアルファベット部分だけを理解できればいいのですが、可読性を考慮した日本語（ベースの）組版を意識した場合、そのように処理されることがしばしばあります。（ただ、これも絶対的なルールが存在するわけではないので、デザイナーや組版オペレーターの裁量に左右されるのですが。）
この流れから、日本語と英語の混在文を書く段階で、日本語中の英単語の前後に半角スペースを入れるような書き方をする人も普通に存在します。（もちろん、そうでない人もいます。）

で、個人的には、HTML や CSS の解釈とその適用以前に、そもそも複数言語の混在テキストの書き方として英単語の前後のスペースを意識したほうが自然なのではないかと考えたわけです。テキストをそのように書けば、現状のどんなブラウザでも text-transform: capitalize; が適用されるわけですし......。
まあ、ぼく個人の仕事上の習慣からそう考えるのかもしれず、何が何でもこだわる気持ちはありませんし、他人に強要する気もありませんが...。


当方、組版の話は全然知識がないもので、とても勉強になりました。
確かに見易さからするとスペースが空いていた方が見易いと思います。

今回この現象に気付いた経緯は、学習の為に洋書の翻訳本でページレイアウト等の模倣をしていた際に気付きました。
その本は、偶然的通行人様のお話にあった点は配慮されていなかったようで、和英混在でスペースは特に取られていませんでした。
もし偶然的通行人様のお話の通り配慮されて組版してあったら、今回の事象は気付かなかったかもしれません。

Masayuki さんが書きました:
まず、日本語と中国語というのはメジャーな言語の中では特殊で、単語をスペースで分かち書きしません。これらの言語は幸い、大文字・小文字という概念が存在する欧米の言語の文字(つまりアルファベット)を使いませんので、アルファベットの部分だけ独立した単語であると解釈するべきだと私は思います。


偶然的通行人 さんが書きました:
CSS の解釈――この場合、text-transform: capitalize; に限って考えると、
Masayuki さんが書きました:
アルファベットの部分だけ独立した単語であると解釈するべき

としたほうが、たしかに自然かもしれませんね。


CSSの振る舞いとして、英字を独立の単語とみなして解釈してくれた方が
自然だと仰られているお二人の上記のご意見に、私も賛成です。
作成者:  aides [ 2010年9月20日(月) 01:43 ]
記事の件名:  Re: CSSの”text-transform: capitalize”の振る舞いについて（和英混在文字列の場合）
此のプロパティって外国語（所謂ローマ字）でも、今現在の存在意義って無い気がするのは私だけでしょうか？
先頭乃至単語一綴を大文字化するのはshift同時押しすれば良いだけですし。
又はf9/10の使い分けで・・・
SEOを含めてコーディングの内容としては素直に文字だけを入力した方がスッキリ感じます。
以上は個人的な見解です。
作成者:  Vitz [ 2010年9月20日(月) 09:50 ]
記事の件名:  Re: CSSの”text-transform: capitalize”の振る舞いについて（和英混在文字列の場合）
aides さんが書きました:
此のプロパティって外国語（所謂ローマ字）でも、今現在の存在意義って無い気がするのは私だけでしょうか？
先頭乃至単語一綴を大文字化するのはshift同時押しすれば良いだけですし。


私もまだまだ勉強不足の身ですので、現在持っている知識だけでの個人的な意見を
述べさせていただきます。もし間違っておりましたらご容赦下さい。

1)　日本語には大小文字の考え方がないのですが、英語は大小文字の区別がある言語で
　あり、英文の記事見出しの書き方として、各単語の語頭を英大文字で書く場合もある
　と思われます。(text-transform: capital)

2)　Webサイトのアクセシビリティを考慮すると、英大文字のべた打ちは音声ブラウザ
　で発音がうまく行われない（英字一字ずつの発音になってしまう）ため、単語を小文字
　で入力して表示のスタイル変更を行う場合があると思われます。
　（text-transform: uppercase）

上記2点のことを考えると、プロパティとしての存在意義があるのではないかと
個人的には思っております。　
作成者:  Masayuki [ 2010年9月20日(月) 12:15 ]
記事の件名:  Re: CSSの”text-transform: capitalize”の振る舞いについて（和英混在文字列の場合）
その通り、アクセシビリティのために重要なプロパティです。

大文字と小文字の意味を考えるとこれらは全く別の文字と考えることもできます。英語に限っても、大文字は文頭、もしくは一部の固有名詞の先頭、そして省略時に使われるもので、大文字が出現しただけで、これらのうちのどれかであるというヒントになります。

それを本当に大文字で記述してしまうとこのヒントを重要視するUA、たとえば、音声ブラウザやクローラの混乱を招いてしまいます。
作成者:  Vitz [ 2010年9月20日(月) 20:06 ]
記事の件名:  Re: CSSの”text-transform: capitalize”の振る舞いについて（和英混在文字列の場合）
Masayuki　様

ご返信、並びに当方の回答のフォローをして頂きまして
ありがとうございました。
ページ 1 ／ 1 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/