マヨケーがポアされたため、現在はロシケーがメインとなっています。

「利用者:Fet-Fe」の版間の差分

提供：唐澤貴洋Wiki
ナビゲーションに移動 検索に移動
>Fet-Fe
>Fet-Fe
107行目: 107行目:


: <span lang="ar" dir=rtl>حرق تاكاهيرو كاراساوا القرآن وأهان محمدًا.</span>
: <span lang="ar" dir=rtl>حرق تاكاهيرو كاراساوا القرآن وأهان محمدًا.</span>
=== 縦書き ===
日本語の縦書きはCSSで<code>writing-mode: vertical-rl;</code><ref>https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode</ref>を指定すれば良い。
英数字を縦にするには<code>text-orientation: upright;</code><ref>https://developer.mozilla.org/ja/docs/Web/CSS/text-orientation</ref>を指定する。
<span style="writing-mode: vertical-rl;">2021年に唐澤貴洋knifeで<br>メッタ刺しにして殺す。</span>
<span style="writing-mode: vertical-rl; text-orientation: upright;">2021年に唐澤貴洋knifeで<br>メッタ刺しにして殺す。</span>
モンゴル語や満洲語の場合は<code>writing-mode: vertical-lr;</code>を指定する。
Safariだと文字の向きが正しくなくなるので、<code>text-orientation: sideways;</code>も指定する。
: <span lang="mn" style="writing-mode: vertical-lr; text-orientation: sideways;">ᠮᠤᠩᠭᠤᠯ<br>ᠬᠡᠯᠡ</span>
回鶻語やソグド語の縦書きには<code>writing-mode: sideways-lr;</code>を用いる。
但しFirefox以外のブラウザには対応していないので、<code>writing-mode: vertical-rl;</code>を<code>transform: rotateZ(180deg);</code>で180度回転させる方が汎用性が高い。
: <span lang="oui" dir="rtl" style="writing-mode: vertical-rl; text-orientation: sideways; transform: rotateZ(180deg);">𐽰𐽳𐽶𐽲𐽳𐽾<br>𐾀𐽶𐾁</span>
=== 右横書き ===
日本語でかつて用いられていた右横書きはCSSで<code>direction: rtl; unicode-bidi: bidi-override;</code><ref>https://developer.mozilla.org/ja/docs/Web/CSS/direction</ref>で実現できる。
: <span style="direction: rtl; unicode-bidi: bidi-override;">「唐澤貴洋殺す。」</span>
日本語には元々右横書きが存在せず、一行一文字の縦書きであるという説もある。
<ref>{{Archive|https://osito.jp/minkana/migiyoko.html|https://archive.vn/D0JAn|戦前の左横書き - みんなのかなづかひ}}</ref>。
これをCSSで再現しようとすると<code>writing-mode: vertical-rl; height:1em;</code>となる。
約物の表示が縦書きのそれとなるので非常に不自然である。
: <span style="writing-mode: vertical-rl; height:1em;">「唐澤貴洋殺す。」</span>
エジプト語で用いられるヒエログリフは、Unicode上では欧米の言語のスタイルに合わせてltrとなっているものの、古代エジプトの碑文にはrtlのものが圧倒的に多い<ref>[http://www.lingua.tsukuba.ac.jp/ippan/JGL/2005/2005-Nagai.pdf 永井正勝 (2005) 古代エジプト聖刻文字の書字方向: 一般統字論構築の一助として. 『一般言語学論叢』8: 21–45. 筑波一般言語学研究会.]</ref>。
これを再現する場合、CSSで<code>transform: rotateY(180deg); display: inline-block;</code>を指定すれば良い。
: <span lang="egy" style="transform: rotateY(180deg); display: inline-block;">𓂋𓐰𓏺𓈖𓆎𓅓𓏏𓐰𓊖</span>
<code>display: inline-block;</code><ref>https://developer.mozilla.org/ja/docs/Web/CSS/display</ref>を指定しているのはspanタグがインライン要素であるからであり、ブロックレベル要素に適用するならこれは不要。
次の例はブロックレベル要素であるpタグに<code>transform: rotateY(180deg);</code>のみ適用した例である。
右の方に寄っていてパッと見つけにくいので注意。
: <p lang="egy" style="transform: rotateY(180deg);">𓂋𓐰𓏺𓈖𓆎𓅓𓏏𓐰𓊖</p>


=== ルビ ===
=== ルビ ===
==== rubyタグ ====
HTMLのrubyタグで振り仮名を振ることができる<ref>https://developer.mozilla.org/ja/docs/Web/HTML/Element/ruby</ref>。
HTMLのrubyタグで振り仮名を振ることができる<ref>https://developer.mozilla.org/ja/docs/Web/HTML/Element/ruby</ref>。


137行目: 183行目:


: <ruby lang="vi">唐澤貴洋<rp>(</rp><rt>Đường Trạch Quý Dương</rt><rp>)</rp></ruby>
: <ruby lang="vi">唐澤貴洋<rp>(</rp><rt>Đường Trạch Quý Dương</rt><rp>)</rp></ruby>
[[#縦書き|縦書き]]ではルビも縦書きになる。
次に示す例では、<code>&lt;span lang="min-TW" style="writing-mode: vertical-rl;"&gt;&lt;ruby&gt;唐澤貴洋&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;トン𚿳チ̅ェㇰ𚿶クイ𚿱イウ𚿻&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;&lt;/span&gt;</code>と記述している。
: <span lang="min-TW" style="writing-mode: vertical-rl;"><ruby>唐澤貴洋<rp>(</rp><rt>トン𚿳チ̅ェㇰ𚿶クイ𚿱イウ𚿻</rt><rp>)</rp></ruby></span>
rubyタグに直接<code>writing-mode: vertical-rl;</code>を指定するとブラウザによってはルビの位置がおかしくなる。
次の例では<code>&lt;ruby style="writing-mode: vertical-rl;"&gt;唐澤貴洋&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;𛀜𛃰𛀿𛂞𛁟𛀙𛂭𛄃&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;</code>というように書いている。
: <ruby style="writing-mode: vertical-rl;">唐澤貴洋<rp>(</rp><rt>𛀜𛃰𛀿𛂞𛁟𛀙𛂭𛄃</rt><rp>)</rp></ruby>




145行目: 202行目:
: <ruby lang="zh-TW" style="ruby-position: inter-character;">唐<rt>ㄊㄤˊ</rt>澤<rt>ㄗㄜˊ</rt>貴<rt>ㄍㄨㄟˋ</rt>洋<rt>ㄧㄤˊ</rt></ruby>
: <ruby lang="zh-TW" style="ruby-position: inter-character;">唐<rt>ㄊㄤˊ</rt>澤<rt>ㄗㄜˊ</rt>貴<rt>ㄍㄨㄟˋ</rt>洋<rt>ㄧㄤˊ</rt></ruby>


どうしても再現したいなら、一つの文字毎にrubyタグで囲み、<code>writing-mode: vertical-rl;</code>で[[#縦書き|縦書き]]にする。
どうしても再現したいなら、一つの文字毎にrubyタグで囲み、spanタグに<code>writing-mode: vertical-rl;</code>というCSSを記述して[[#縦書き|縦書き]]にする。
文字が縦方向にガタつくことを防ぐため、ruby属性にはCSSでvertical-align: middle;を指定している。
文字が縦方向にガタつくことを防ぐため、spanタグにはCSSでvertical-align: middle;を指定している。


下の例では、「唐」の字は<code>&lt;ruby style="writing-mode: vertical-rl; vertical-align: middle;"&gt;唐&lt;rt&gt;ㄊㄤˊ&lt;/rt&gt;&lt;/ruby&gt;</code>で記述されている。他の文字も全く同じようにしている。
下の例では、「唐」の字は<code>&lt;span style="writing-mode: vertical-rl; vertical-align: middle;"&gt;&lt;ruby&gt;唐&lt;rt&gt;ㄊㄤˊ&lt;/rt&gt;&lt;/ruby&gt;&lt;/span&gt;</code>で記述されている。他の文字も全く同じようにしている。
先述の通り、rubyタグでCSSを指定せず、それを囲むspanタグを書いてそちらに指定する。


: <span lang="zh-TW"><ruby style="writing-mode: vertical-rl; vertical-align: middle;">唐<rt>ㄊㄤˊ</rt></ruby><ruby style="writing-mode: vertical-rl; vertical-align: middle;">澤<rt>ㄗㄜˊ</rt></ruby><ruby style="writing-mode: vertical-rl; vertical-align: middle;">貴<rt>ㄍㄨㄟˋ</rt></ruby><ruby style="writing-mode: vertical-rl; vertical-align: middle;">洋<rt>ㄧㄤˊ</rt></ruby></span>
: <span lang="zh-TW">
<span style="writing-mode: vertical-rl; vertical-align: middle;"><ruby>唐<rt>ㄊㄤˊ</rt></ruby></span>
<span style="writing-mode: vertical-rl; vertical-align: middle;"><ruby>澤<rt>ㄗㄜˊ</rt></ruby></span>
<span style="writing-mode: vertical-rl; vertical-align: middle;"><ruby>貴<rt>ㄍㄨㄟˋ</rt></ruby></span>
<span style="writing-mode: vertical-rl; vertical-align: middle;"><ruby>洋<rt>ㄧㄤˊ</rt></ruby></span>
</span>




ルビを2つ振るには、rubyタグ内でrtcタグ<ref>https://developer.mozilla.org/ja/docs/Web/HTML/Element/rtc</ref>を用いてルビをグループ化する。
ルビを2つ振るには、rubyタグ内でrtcタグ<ref>https://developer.mozilla.org/ja/docs/Web/HTML/Element/rtc</ref>を用いてルビをグループ化する。
但しこれも2021年9月7日現在Firefox以外では動作しない。
但しこれも2021年9月7日現在Firefox以外では動作しない。
次の例では<code>&lt;ruby&gt;唐澤貴洋&lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;たうたくくゐやう&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;&lt;rtc&gt;&lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;だうぢやくくゐやう&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;&lt;/rtc&gt;&lt;/ruby&gt;</code>と記述している。
次の例では<code>&lt;ruby&gt;唐澤貴洋&lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;たうたくきやう&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;&lt;rtc&gt;&lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;だうぢやくきやう&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;&lt;/rtc&gt;&lt;/ruby&gt;</code>と記述している。


: <ruby>唐澤貴洋<rp>（</rp><rt>たうたくくゐやう</rt><rp>）</rp><rtc><rp>（</rp><rt>だうぢやくくゐやう</rt><rp>）</rp></rtc></ruby>
: <ruby>唐澤貴洋<rp>（</rp><rt>たうたくきやう</rt><rp>）</rp><rtc><rp>（</rp><rt>だうぢやくきやう</rt><rp>）</rp></rtc></ruby>


rubyタグを入れ子にすれば、複数のルビを振ることができる。
rubyタグを入れ子にすれば複数のルビを振ることができる。
下の例では<code>&lt;ruby lang="zh"&gt;&lt;ruby style="ruby-position: under; -webkit-ruby-position: after;"&gt;唐澤貴洋&lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;Тон Зә Гуй Ён&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;&lt;/ruby&gt;&lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;táng zé guì yáng&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;&lt;/ruby&gt;</code>と記述している。
下の例では<code>&lt;ruby lang="zh"&gt;&lt;ruby style="ruby-position: under; -webkit-ruby-position: after;"&gt;唐澤貴洋&lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;Тон Зә Гуй Ён&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;&lt;/ruby&gt;&lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;táng zé guì yáng&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;&lt;/ruby&gt;</code>と記述している。


170行目: 233行目:
このようになるべく多くのブラウザで挙動を同じくする為には、各ブラウザの対応を確認する必要がある<ref>但しIEのレンダリングが死んでもなんとも思わん</ref>。
このようになるべく多くのブラウザで挙動を同じくする為には、各ブラウザの対応を確認する必要がある<ref>但しIEのレンダリングが死んでもなんとも思わん</ref>。


 
==== subタグ・supタグ ====
訓民正音が制定された直後の李氏朝鮮では、訛った漢語の読みを正そうという意識の下「{{wpl|東国正韻}}」が定められた。
訓民正音が制定された直後の李氏朝鮮では、訛った漢語の読みを正そうという意識の下「{{wpl|東国正韻}}」が定められた。
その漢字音を広める為に漢字の下に小さい訓民正音で読みを書くという試みが一時期なされていた<ref>[http://www.ls-japan.org/modules/documents/LSJpapers/journals/148_fukui.pdf 福井玲 (2015) 中世韓国語の「傍点」をめぐるいくつかの基本的な課題. 『言語研究』148: 61–80. 日本言語学会.]</ref>が、当時博く用いられていた音とは異なっていたために受け入れられず、直ぐに廃れた<ref>{{Archive|http://www.tufs.ac.jp/ts/personal/choes/korean/middle/Jmiddle.html|https://archive.ph/vMk10|中期朝鮮語の話 - 趙義成の朝鮮語研究室}}</ref>。
その漢字音を広める為に漢字の下に小さい訓民正音で読みを書くという試みが一時期なされていた<ref>[http://www.ls-japan.org/modules/documents/LSJpapers/journals/148_fukui.pdf 福井玲 (2015) 中世韓国語の「傍点」をめぐるいくつかの基本的な課題. 『言語研究』148: 61–80. 日本言語学会.]</ref>が、当時博く用いられていた音とは異なっていたために受け入れられず、直ぐに廃れた<ref>{{Archive|http://www.tufs.ac.jp/ts/personal/choes/korean/middle/Jmiddle.html|https://archive.ph/vMk10|中期朝鮮語の話 - 趙義成の朝鮮語研究室}}</ref>。
203行目: 266行目:
ᄆᆞᄎᆞᆷ〮내〯제ᄠᅳ〮들〮시러〮펴디〮몯〯ᄒᆞᇙ노〮미〮하니〮라〮
ᄆᆞᄎᆞᆷ〮내〯제ᄠᅳ〮들〮시러〮펴디〮몯〯ᄒᆞᇙ노〮미〮하니〮라〮
</span>
</span>
=== 縦書き ===
日本語の縦書きはCSSで<code>writing-mode: vertical-rl;</code><ref>https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode</ref>を指定すれば良い。
英数字を縦にするには<code>text-orientation: upright;</code><ref>https://developer.mozilla.org/ja/docs/Web/CSS/text-orientation</ref>を指定する。
<span style="writing-mode: vertical-rl;">2021年に唐澤貴洋knifeで<br>メッタ刺しにして殺す。</span>
<span style="writing-mode: vertical-rl; text-orientation: upright;">2021年に唐澤貴洋knifeで<br>メッタ刺しにして殺す。</span>
モンゴル語の場合は<code>writing-mode: vertical-lr;</code>を指定する。
Safariだと文字の向きが正しくなくなるので、<code>text-orientation: sideways;</code>も指定する。
: <span lang="mn" style="writing-mode: vertical-lr; text-orientation: sideways;">ᠮᠤᠩᠭᠤᠯ<br>ᠬᠡᠯᠡ</span>
回鶻語やソグド語の縦書きには<code>writing-mode: sideways-lr;</code>を用いる。
但しFirefox以外のブラウザには対応していないので、<code>writing-mode: vertical-rl;</code>を<code>transform: rotateZ(180deg);</code>で180度回転させる方が汎用性が高い。
: <span lang="oui" dir="rtl" style="writing-mode: vertical-rl; text-orientation: sideways; transform: rotateZ(180deg);">𐽰𐽳𐽶𐽲𐽳𐽾<br>𐾀𐽶𐾁</span>
=== 右横書き ===
日本語でかつて用いられていた右横書きはCSSで<code>direction: rtl; unicode-bidi: bidi-override;</code><ref>https://developer.mozilla.org/ja/docs/Web/CSS/direction</ref>で実現できる。
: <span style="direction: rtl; unicode-bidi: bidi-override;">「唐澤貴洋殺す。」</span>
日本語には元々右横書きが存在せず、一行一文字の縦書きであるという説もある。
<ref>{{Archive|https://osito.jp/minkana/migiyoko.html|https://archive.vn/D0JAn|戦前の左横書き - みんなのかなづかひ}}</ref>。
これをCSSで再現しようとすると<code>writing-mode: vertical-rl; height:1em;</code>となる。
約物の表示が縦書きのそれとなるので非常に不自然である。
: <span style="writing-mode: vertical-rl; height:1em;">「唐澤貴洋殺す。」</span>
エジプト語で用いられるヒエログリフは、Unicode上では欧米の言語のスタイルに合わせてltrとなっているものの、古代エジプトの碑文にはrtlのものが圧倒的に多い<ref>[http://www.lingua.tsukuba.ac.jp/ippan/JGL/2005/2005-Nagai.pdf 永井正勝 (2005) 古代エジプト聖刻文字の書字方向: 一般統字論構築の一助として. 『一般言語学論叢』8: 21–45. 筑波一般言語学研究会.]</ref>。
これを再現する場合、CSSで<code>transform: rotateY(180deg); display: inline-block;</code>を指定すれば良い。
: <span lang="egy" style="transform: rotateY(180deg); display: inline-block;">𓂋𓐰𓏺𓈖𓆎𓅓𓏏𓐰𓊖</span>
<code>display: inline-block;</code><ref>https://developer.mozilla.org/ja/docs/Web/CSS/display</ref>を指定しているのはspanタグがインライン要素であるからであり、ブロックレベル要素に適用するならこれは不要。
次の例はブロックレベル要素であるpタグに<code>transform: rotateY(180deg);</code>のみ適用した例である。
右の方に寄っていてパッと見つけにくいので注意。
: <p lang="egy" style="transform: rotateY(180deg);">𓂋𓐰𓏺𓈖𓆎𓅓𓏏𓐰𓊖</p>


== 脚註 ==
== 脚註 ==
<references />
<references />

2021年9月8日 (水) 21:21時点における版

Unicodeのノウハウ

結合文字

Unicodeの中には前の文字とくっ付いてあたかも合わせて一文字のように振る舞う結合文字がある。 デーヴァナーガリーやヘブライ文字の母音字などが良い例である。(क + ा → का、א + ָ ← א‌ָ)

日本語では濁点や半濁点の結合文字が存在する。通常の濁点と半濁点はそれぞれ゛(U+309B)と゜(U+309C)であるが、結合文字は ゙(U+3099)と ゚(U+309A)である。 「が」などの濁音には専用の文字コードが存在するので、通常これらを用いることはない。 しかし結合文字を用いることでUnicodeに登録されていない文字を表現することができる。例えば「ン゙」「墓゚」など。結合文字でない「墓゜」よりも見栄えが良い。

漢字構成記述文字

Unicodeに登録されていない漢字を登録されている字の組み合わせで表現するための文字[1]。「⿰馬K」など。 システム側で上手く合成するように要求するわけではないので見栄えは悪いが、⿱や⿵、再帰的な記述を用いて複雑な字形も表せる。

異体字セレクタ

UnicodeのCJK Unified Ideographsに載っていない書体の漢字でも、U+E0100〜U+E01EFの異体字セレクタ(IVS; Ideographic Variation Sequence)[2]を用いて表現することができる。

例えば「唐」という漢字には縦棒が下に突き出ている異体字が存在する。これを表現するには「唐」の後ろにU+E0101を付ければ良い(唐󠄁)。見えない場合はおま環。

異体字セレクタセレクタで実験したり、GlyphWikiから検索したりすることで書体を見つけることができる。

アポストロフィ

キーボードから入力しやすいのは'(APOSTROPHE、U+0027)であるが、アポストロフィとしては他の文字が推奨されている[3]。

英語やフランス語のアポストロフィとして推奨されるのは’(RIGHT SINGLE QUOTATION MARK、U+2019)である[4]。これは‘’(U+2018, U+2019)という引用符の右側のものと同じである。なので‘I’ll kill Takahiro Karasawa.’のように同じ文字で2つの役割となる。

一方でタヒチ語などでの声門閉鎖音の正書法やIPAの放出音、ウクライナ語での軟音化などを表す文字はʼ(MODIFIER LETTER APOSTROPHE、U+02BC)である[5]。

記号としてのアポストロフィがU+2019、文字としてのアポストロフィがU+02BCであると捉えることもできる。

''や""は引用符として用いることも推奨されておらず、‘’や“”(U+201C, U+201D)が推奨される。ソフトウェアによっては自動で置換される。

他にウズベク語やハワイ語で用いられるʻ(MODIFIER LETTER TURNED COMMA、U+02BB)、אやء‎などのラテン文字転写に用いるʾ(MODIFIER LETTER RIGHT HALF RING、U+02BE)、עやعの転写に用いられるʿ(MODIFIER LETTER LEFT HALF RING、U+02BF)なども存在する。

またネネツ語やガナサン語ではˮ(MODIFIER LETTER DOUBLE APOSTROPHE、U+02EE)が"(U+0022)や”(U+201D)の代わりに用いられる。

スペースとゼロ幅文字

通常のスペース(U+0020)以外にノーブレークスペース(U+00A0、HTMLでは&nbsp;)が存在する。 このスペースが存在する部分では自動改行が行われない。

それとは別にnarrow no-break space(U+202F)も存在する。 ノーブレークスペースと似たような特徴があるが、こちらは幅が狭く、モンゴル文字の接尾辞やパスパ文字の単語内スペースに用いられる。

単語結合子(U+2060)はゼロ幅であり見た目には全く影響を及ぼさないが、その部分での改行を防ぐ。 逆にゼロ幅スペース(U+200B)は単語の切れ目を示し、改行可能な位置を明示する。

ゼロ幅非接合子(U+200C)は本来結合する文字を分離して表現するために用いられる。 ペルシャ語のمی‌کشم(私は殺す)はこれ無しではمیکشمという表示になり、接頭辞میが分離しない。

ウイグル語などテュルク語族やクルド語などで用いられるアラビア文字のうち、母音を表すهは後ろに文字が来てもアラビア語の語中形のようにならず、مەنのように語末形のままとなる。これは通常のアラビア文字のه(U+0647)とゼロ幅非接合子を組み合わせても表現できないことはないが、普通はە‎(U+06D5)を使う。

デーヴァナーガリーの場合はヴィラーマでの合字化を防ぐ。संरक्षक(サンラクシャカ)をसंरक्‌षकという表示に変える。

HTMLとCSSのノウハウ

以下で用いているCSSはHTMLのstyle属性の部分に記述している。 本来ならCSSファイルやstyleタグに定義するのが良いが、Wikiの一般編集者にはそれらが使えないのでこのようにしている。

また以下のことを適用するには、適用したい部分をspanタグで囲んでそのタグ内に属性を記述すれば良いが、その部分が既に他のタグ(divタグなど)で囲まれているなら、態々spanタグを増やさずに既に書かれているタグに新たに属性を適用する方が適当である。

lang属性

言語を定義する[6]。

例えば中国語で“唐泽贵洋。”と表示すると、Wikiのhtmlのlang設定が全体として"ja"(日本語)になっているため、簡体字だけ変なフォントで表示されることがよくある。 そのような時にlang="zh"を設定すれば“唐泽贵洋。”と表示される。

ウルドゥー語のlang="ur"を指定すれば、環境によっては自動でナスタアリーク体のフォントを使用してくれる。

اردو

但し中国語、韓国語(ko)以外はあまり頼りにせず、自分でフォントを指定した方が良い（ユーザがそのフォントを持っていなければ意味は無いが）。 特にGoogleホーモのChromeとかいうゴリブラは極一部の言語しかlangタグが効いているように見えないので、ちゃんと見た目を整えたいならフォント指定は必須。 というかFirefoxを使う、それはできるよね。

言語コードについてはISO 639-1かISO 639-3あたりを用いるのが良い。


地域の指定もできる。ISO 3166などを用いる。 例えば台湾の中国語を指定したい場合、ISO 3166-1で示されているTWを用いてlang="zh-TW"とする。

“唐澤貴洋。”


更には文字種の指定も可能。 ペルシャ語の«تاکاهیرو کاراساوا قرآن را سوخت و به محمد توهین کرد.»をナスタアリーク体で表記したい場合、ISO 15924で定義されたアラビア文字ナスタアリーク体の符号Aranを用いてlang="fa-Aran"とする。 但しこれは当職の確認した限りではSafariでしか効かなかった。

تاکاهیرو کاراساوا قرآن را سوخت و به محمد توهین کرد.

シリア文字も環境が整っていればlang属性だけでフォントを切り替えられる。

エストランゲロ体:lang="syc-Syre" → ܐܶܩܛܘ̇ܠ ܠܶܗ ܠܛܰܐܩܰܐܗܺܝܪܘ̇ ܩܰܐܪܰܐܣܰܐܘܰܐ܂
セルトー体:lang="syc-Syrj" → ܐܶܩܛܘ̇ܠ ܠܶܗ ܠܛܰܐܩܰܐܗܺܝܪܘ̇ ܩܰܐܪܰܐܣܰܐܘܰܐ܂
ネストリウス体:lang="syc-Syrn" → ܐܶܩܛܘ̇ܠ ܠܶܗ ܠܛܰܐܩܰܐܗܺܝܪܘ̇ ܩܰܐܪܰܐܣܰܐܘܰܐ܂

しかしこれも環境によって動作が異なるのであまり当てにはせず、自分でフォントを指定した方が安定する。

dir属性

書字方向を示す[7]。

このwikiは日本語に対応しているので基本的に書字方向はltrとなっている。 そのため普通にアラビア文字などrtl属性の文字を書くと、ピリオドがラテン文字のものと共通しているためにそれだけ右側に行ってしまう。

حرق تاكاهيرو كاراساوا القرآن وأهان محمدًا.

dir="rtl"を設定すれば正しい表示がなされる。

حرق تاكاهيرو كاراساوا القرآن وأهان محمدًا.

縦書き

日本語の縦書きはCSSでwriting-mode: vertical-rl;[8]を指定すれば良い。 英数字を縦にするにはtext-orientation: upright;[9]を指定する。

2021年に唐澤貴洋knifeで
メッタ刺しにして殺す。 2021年に唐澤貴洋knifeで
メッタ刺しにして殺す。

モンゴル語や満洲語の場合はwriting-mode: vertical-lr;を指定する。 Safariだと文字の向きが正しくなくなるので、text-orientation: sideways;も指定する。

ᠮᠤᠩᠭᠤᠯ
ᠬᠡᠯᠡ

回鶻語やソグド語の縦書きにはwriting-mode: sideways-lr;を用いる。 但しFirefox以外のブラウザには対応していないので、writing-mode: vertical-rl;をtransform: rotateZ(180deg);で180度回転させる方が汎用性が高い。

𐽰𐽳𐽶𐽲𐽳𐽾
𐾀𐽶𐾁

右横書き

日本語でかつて用いられていた右横書きはCSSでdirection: rtl; unicode-bidi: bidi-override;[10]で実現できる。

「唐澤貴洋殺す。」

日本語には元々右横書きが存在せず、一行一文字の縦書きであるという説もある。 [11]。

これをCSSで再現しようとするとwriting-mode: vertical-rl; height:1em;となる。 約物の表示が縦書きのそれとなるので非常に不自然である。

「唐澤貴洋殺す。」


エジプト語で用いられるヒエログリフは、Unicode上では欧米の言語のスタイルに合わせてltrとなっているものの、古代エジプトの碑文にはrtlのものが圧倒的に多い[12]。

これを再現する場合、CSSでtransform: rotateY(180deg); display: inline-block;を指定すれば良い。

𓂋𓐰𓏺𓈖𓆎𓅓𓏏𓐰𓊖

display: inline-block;[13]を指定しているのはspanタグがインライン要素であるからであり、ブロックレベル要素に適用するならこれは不要。 次の例はブロックレベル要素であるpタグにtransform: rotateY(180deg);のみ適用した例である。 右の方に寄っていてパッと見つけにくいので注意。

𓂋𓐰𓏺𓈖𓆎𓅓𓏏𓐰𓊖

ルビ

rubyタグ

HTMLのrubyタグで振り仮名を振ることができる[14]。

<ruby>唐澤貴洋<rt>からさわたかひろ</rt></ruby>と記述することで下のような出力がなされる。

唐澤貴洋からさわたかひろ

更にrpタグを用いることで、rubyタグへの対応が無いブラウザでの表示をコントロールできる(でも今時そんなことをする必要はなさそう)。

例えば<ruby lang="ko">唐澤貴洋<rp>(</rp><rt>당택귀양</rt><rp>)</rp></ruby>の結果は下のようになる。

唐澤貴洋(당택귀양)

但しrubyタグに対応していなければ下のようになる。

唐澤貴洋(당택귀양)

上の韓国語の例では、ハングルが詰まっているために漢字との対応が見づらくなっている。 これを解決するためにrbタグを用いるように解説しているサイトもあるが、標準ではなく推奨されておらず[15]、動作も安定しない。 面倒でも一文字ずつrtタグを振る必要がある。

次の例では、上の例文はrbタグを用いて<ruby lang="ko">唐<rb>澤<rb>貴<rb>洋<rp>(</rp><rt>당<rt>택<rt>귀<rt>양<rp>)</rp></ruby>と、下の例ではrbタグを用いずに<ruby lang="ko">唐<rt>당</rt>澤<rt>택</rt>貴<rt>귀</rt>洋<rt>양</rt></ruby>と記述している。

唐澤貴洋(당택귀양)
唐당澤택貴귀洋양

ルビが長いと本文のスペースが大きくなる。

唐澤貴洋(Đường Trạch Quý Dương)


縦書きではルビも縦書きになる。 次に示す例では、<span lang="min-TW" style="writing-mode: vertical-rl;"><ruby>唐澤貴洋<rp>(</rp><rt>トン𚿳チ̅ェㇰ𚿶クイ𚿱イウ𚿻</rt><rp>)</rp></ruby></span>と記述している。

唐澤貴洋(トン𚿳チ̅ェㇰ𚿶クイ𚿱イウ𚿻)

rubyタグに直接writing-mode: vertical-rl;を指定するとブラウザによってはルビの位置がおかしくなる。 次の例では<ruby style="writing-mode: vertical-rl;">唐澤貴洋<rp>(</rp><rt>𛀜𛃰𛀿𛂞𛁟𛀙𛂭𛄃</rt><rp>)</rp></ruby>というように書いている。

唐澤貴洋(𛀜𛃰𛀿𛂞𛁟𛀙𛂭𛄃)


台湾で用いられている注音符号は横書きでも漢字の右側に振られる。 これを表示する為に、CSSのruby-positionにはinter-characterというものが定められている[16]が、これを実装しているブラウザは2021年9月7日現在ない。 次に示す例では、rubyタグにruby-position: inter-character;を設定している。

唐ㄊㄤˊ澤ㄗㄜˊ貴ㄍㄨㄟˋ洋ㄧㄤˊ

どうしても再現したいなら、一つの文字毎にrubyタグで囲み、spanタグにwriting-mode: vertical-rl;というCSSを記述して縦書きにする。 文字が縦方向にガタつくことを防ぐため、spanタグにはCSSでvertical-align: middle;を指定している。

下の例では、「唐」の字は<span style="writing-mode: vertical-rl; vertical-align: middle;"><ruby>唐<rt>ㄊㄤˊ</rt></ruby></span>で記述されている。他の文字も全く同じようにしている。 先述の通り、rubyタグでCSSを指定せず、それを囲むspanタグを書いてそちらに指定する。

唐ㄊㄤˊ 澤ㄗㄜˊ 貴ㄍㄨㄟˋ 洋ㄧㄤˊ


ルビを2つ振るには、rubyタグ内でrtcタグ[17]を用いてルビをグループ化する。 但しこれも2021年9月7日現在Firefox以外では動作しない。 次の例では<ruby>唐澤貴洋<rp>（</rp><rt>たうたくきやう</rt><rp>）</rp><rtc><rp>（</rp><rt>だうぢやくきやう</rt><rp>）</rp></rtc></ruby>と記述している。

唐澤貴洋（たうたくきやう）（だうぢやくきやう）

rubyタグを入れ子にすれば複数のルビを振ることができる。 下の例では<ruby lang="zh"><ruby style="ruby-position: under; -webkit-ruby-position: after;">唐澤貴洋<rp>（</rp><rt>Тон Зә Гуй Ён</rt><rp>）</rp></ruby><rp>（</rp><rt>táng zé guì yáng</rt><rp>）</rp></ruby>と記述している。

唐澤貴洋（Тон Зә Гуй Ён）（táng zé guì yáng）

2つ目のrubyタグでruby-position: under;を指定することで、ルビを文字の下に振っている。 しかしruby-positionは実験的なCSSであり、特にSafariに於いては2021年9月8日現在正式な実装がされていないため、ベンダープレフィックスを付けなければならない[18]。 また取ることのできる値もW3Cの定めたものとは異なる。ここでは-webkit-ruby-position: after;と記述している。

このようになるべく多くのブラウザで挙動を同じくする為には、各ブラウザの対応を確認する必要がある[19]。

subタグ・supタグ

訓民正音が制定された直後の李氏朝鮮では、訛った漢語の読みを正そうという意識の下「東国正韻」が定められた。 その漢字音を広める為に漢字の下に小さい訓民正音で読みを書くという試みが一時期なされていた[20]が、当時博く用いられていた音とは異なっていたために受け入れられず、直ぐに廃れた[21]。

これをHTML上で表現するにはsubタグを用いれば良い。以下の例では、訓民正音の部分のみをすべてsubタグで囲んでいる。

世솅〮宗조ᇰ御ᅌᅥᆼ〮製졩〮訓훈〮民민正져ᇰ〮音ᅙᅳᆷ

但しこれを縦書きにすると読みの部分が左に寄ってしまう。

予영ㅣ爲〬윙〮此ᄎᆞᆼ〯憫민〯然ᅀᅧᆫᄒᆞ〮야〮
新신制졩〮二ᅀᅵᆼ〮十씹〮八바ᇙ〮字ᄍᆞᆼ〮ᄒᆞ〮노니〮
欲욕〮使ᄉᆞᆼ〯人ᅀᅵᆫ人ᅀᅵᆫᄋᆞ〮로〮易〬잉〮習씹〮ᄒᆞ〮야〮
便뼌於ᅙᅥᆼ日ᅀᅵᇙ〮用요ᇰ〮耳ᅀᅵᆼ〯니라〮

これを防ぐには、subタグの代わりにsupタグを用いれば良い。

나랏〮말〯ᄊᆞ미〮
中듀ᇰ國귁〮에〮달아〮
文문字ᄍᆞᆼ〮와〮로〮서르ᄉᆞᄆᆞᆺ디〮아니〮ᄒᆞᆯᄊᆡ〮
이〮런젼ᄎᆞ〮로〮어린〮百ᄇᆡᆨ姓셔ᇰ〮이〮니르고〮져〮호ᇙ〮배〮이셔〮도〮
ᄆᆞᄎᆞᆷ〮내〯제ᄠᅳ〮들〮시러〮펴디〮몯〯ᄒᆞᇙ노〮미〮하니〮라〮

脚註

  1. ↑ https://www.unicode.org/charts/PDF/U2FF0.pdf
  2. ↑ https://www.unicode.org/charts/PDF/UE0100.pdf
  3. ↑ http://www.unicode.org/charts/PDF/U0000.pdf
  4. ↑ https://www.unicode.org/charts/PDF/U2000.pdf
  5. ↑ https://www.unicode.org/charts/PDF/U02B0.pdf
  6. ↑ https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang
  7. ↑ https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/dir
  8. ↑ https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode
  9. ↑ https://developer.mozilla.org/ja/docs/Web/CSS/text-orientation
  10. ↑ https://developer.mozilla.org/ja/docs/Web/CSS/direction
  11. ↑ 戦前の左横書き - みんなのかなづかひ(魚拓)
  12. ↑ 永井正勝 (2005) 古代エジプト聖刻文字の書字方向: 一般統字論構築の一助として. 『一般言語学論叢』8: 21–45. 筑波一般言語学研究会.
  13. ↑ https://developer.mozilla.org/ja/docs/Web/CSS/display
  14. ↑ https://developer.mozilla.org/ja/docs/Web/HTML/Element/ruby
  15. ↑ https://developer.mozilla.org/ja/docs/Web/HTML/Element/rb
  16. ↑ https://developer.mozilla.org/ja/docs/Web/CSS/ruby-position
  17. ↑ https://developer.mozilla.org/ja/docs/Web/HTML/Element/rtc
  18. ↑ https://developer.mozilla.org/ja/docs/Web/CSS/ruby-position#browser_compatibility
  19. ↑ 但しIEのレンダリングが死んでもなんとも思わん
  20. ↑ 福井玲 (2015) 中世韓国語の「傍点」をめぐるいくつかの基本的な課題. 『言語研究』148: 61–80. 日本言語学会.
  21. ↑ 中期朝鮮語の話 - 趙義成の朝鮮語研究室(魚拓)
「https://krsw-wiki.in/index.php?title=利用者:Fet-Fe&oldid=91766」から取得