HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |123456789101112131415|  次へ>>

ウイルスバスター 30日無料体験版 ノートン無料体験版 マカフィー・30日間無料版 [PR]

● 文字の方向性

日本語は、現在、欧米に習い左から右へ文字を書いていくが、昔は『かわだ亭』と右から左へ文字を書いていました。

かつての日本がそうであったように、アラビア語やヘブライ語は、文字を右から左へと書いていきます。 こういった流れる方向が違う文字が混在したページを作成したい場合、その方向を制御する必要がでてきます。
HTML要素として、記事や表に関する方向(左から右か、右から左か)を設定する必要があるときには、 『dir』という属性を使用します。Opera未サポート

dir="ltr":左から右の、テキストあるいは表。(Left To Rightのこと)
dir="rtl":右から左の、テキストあるいは表。(Right To Leftのこと)

属性値は上の二種類です。
この、dir属性は、方向性のない中立な文字に対して 方向性を設定するための属性です。
ただし、UNICODE(標準化された文字コード体系)には文字が流れる方向、 『左から右文字』か『右から左文字』かの情報が含まれています。 さらに、通常ブラウザは、 表示しようとしている文字の流れるべき方向を判断しています。 そのため、ブラウザは特殊な(通常、利用言語とは逆方向・・・日本語なら右から左文字) 方向で流れるべき文字が記述された場合にはそれを判断し、 自動的にUNICODEの情報に基づいた適切な方向で文字を出力しま。す。
しかし、同一ページ内に左から右文字と右から左文字が混在した場合、 dir属性の値によって、 どちらの文字方向に合わせるかをブラウザに設定することができます

・文字の言語と方向

この書字方向を決定付けるには、『lang』属性と併せて使用しなくてはなりません。
lang属性とは、使用されている言語を設定するための属性です。 lang属性はすべての環境でサポートされているわけではありませんが、 検索エンジンの検索言語を絞り込む手助けになったり、音声システムの発声・発音のための情報となります。
言語コード配下の通りです。

en-US(アメリカ英語) fr(フランス語) de(ドイツ語) it(イタリア語) nl(オランダ語) el(ギリシャ語) es(スペイン語) pt(ポルトガル語) ar(アラビア語) he(ヘブライ語) ru(ロシア語) zh(中国語) ja(日本語) hi(ヒンズー語)

日本語環境で使用しているので日本語(左から右文字)でdir属性を試してみます。

<P lang="jp" dir="rtl">

と記述したP要素内に『いろはに・・・・(ん)』と記述します。(下↓
右に寄せられただけなら救いがありあますが、なぜか最後の括弧だけが一番左に来ています。(IE5.5・Netscape7.0)
2段目は『<BDO dir="rtl">』というタグを使用してみました。

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす(ん)

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす(ん)

冒頭の例は以下のように書いています。
この属性は表(TABLE要素)の表示向きにも適用されます。
左から右の表は、第0行0列が左上となり、右から左の表は第0行0列が右上側となります。

<P lang="jp" dir="ltr"> 日本語は、現在、欧米に習い左から右へ文字を書いていくが、昔は『<BDO dir="rtl">かわだ亭</BDO>』と右から左へ文字を書いていました。 </P>

BDO要素はUNICODEの方向制御機能を無効化する要素です。
日本語文字は左から右に書かれる物です。そのため、dir属性によって『右から左へ』と指定しても、 UNICODEの文字方向に従って文字は表示されます。
そこでBDO要素を使用して、UNICODEの方向制御機能を無効化し、 強制的に文字の流れを『右から左へ』としています
ところで『(』『)』ですが、上では『左に来た』と書きましたが、下をみて見るとそうではないように思えます。

(123456789)

(123456789)と記述したものですが、どうやら最初と最後の括弧『(』『)』残りの『123456789』の3つの単語が 右から左へ流れる文字として書かれたと考えられます。
つまり、上の『いろは・・・』も『いろは・・・(ん』までと、 最後の括弧の2つの単語が右から左へ流れる文字として書かれたと判断できます。
この括弧の現象は半角で書くことで解決されます。
下は『123 456 789 (0) abc def ghi jkl mno pqr stu vwx yz@』と記述してあります。
数字の部分は半角スペース毎に単語として区切られ右から左文字として、 a〜zはスペースを無視して一文と判断されて表示されています。 これは上の日本語同様アルファベットは左から右に書くものとされ、 数字は方向性のない中立文字として表示されていると考えられます。
これも上同様にBDO要素を使えば2段目のようにすべての文字を左から右に流すことができます。

123 456 789 (0) abc def ghi jkl mno pqr stu vwx yz@

123 456 789 (0) abc def ghi jkl mno pqr stu vwx yz@

・CSSによる文字方向の制御

CSSのプロパティ『direction』により文字の左右方向を設定することができます。
値は『ltr』左から右(LeftToRight)、 『rtl』(RightToLeft)右から左へと表記します。

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす(ん)
123 456 789 (0) abc def ghi jkl mno pqr stu vwx yz@

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす(ん)
123 456 789 (0) abc def ghi jkl mno pqr stu vwx yz@

ただし、この値を適用するには上記のUNICODEの方向制御機能の問題があります。
CSSのプロパティにおけるUNICODEの制御は『unicode-bidi』プロパティで行います。 値は以下より選びます。
normal:Unicodeの方向制御機能が適用されます。初期値状態と同じです。
embed:Unicodeの方向制御機能に、directionプロパティで設定された値を組み込みます。
bidi-override:Unicodeの方向制御機能を無効にし、文字の流れる方向をdirectionプロパティの値にします。

<P style="direction:rtl ; unicode-bidi:embed">
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす(ん)<BR>
123 456 789 (0) abc def ghi jkl mno pqr stu vwx yz@<BR>
</P>
<P style="direction:rtl ; unicode-bidi:bidi-override">
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす(ん)<BR>
123 456 789 (0) abc def ghi jkl mno pqr stu vwx yz@<BR>
</P>

これにより、HTMLタグの文字方向制御と同様に文字の方向を定められます。 directionプロパティを適用させるには、 unicode−bidiプロパティの値を『embed』(上記の上)か 『override』(上記の下)に設定します。

<<前へ  |上へ|  次へ>>
123456789101112131415

パソコンのウイルス対策大丈夫ですか?どれかひとつは入れておきたい対策ソフト
マカフィー・ストア シマンテックストア ウイルスバスター公式トレンドマイクロ・オンラインショップ

TOP] [HOME

更新日時:2014/08/09