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

利用者:Fet-Fe

提供：唐澤貴洋Wiki
2021年9月20日 (月) 19:21時点における>Fet-Feによる版 (→‎subタグ・supタグ)
ナビゲーションに移動 検索に移動

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やIVS異体字メーカーから検索したりすることで書体を見つけることができる。

アポストロフィ

キーボードから入力しやすいのは'(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では )が存在する。 このスペースが存在する部分では自動改行が行われない。

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


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


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

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

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


ゼロ幅接合子(U+200D)もゼロ幅の文字であるが、こちらは接合することのできる文字を接合形に変形する。 デーヴァナーガリーの子音字にヴィラーマを付けたものは後続の子音字と結合するが、ゼロ幅接合子を置けば後続子音字が無くても接合形をとる。 ञ + ् + U+200D → ञ् + U+200D → ञ्‍

アラビア文字でも同様になる。 アラビア語の一文字の前置詞は後続の単語と結合するが、後続の単語がアラビア文字でなかったとき、独立形で書かれる場合と頭字形で書かれる場合とがある。 後者の場合、このサイト(魚拓)に見られるように«بـToshiba»と表せる。 この例ではカシーダ(ARABIC TATWEEL、U+0640)を用いてبを頭字形にしているが、カシーダの分長くなってしまうので«ب‍Toshiba»のようにゼロ幅接合子を用いるのが良い。

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タグを用いれば良い。

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

これらのタグを用いて漢文の返り点やハングル口訣などを表記することができる。

無㆓クシテ恆產㆒而有󠄁㆓ル恆心㆒者󠄁ハ、惟ダ士ノミ爲㆑ス能クスルヲ。
若㆑キハ民ノ則チ無㆓ケレバ恆產㆒、因リテ無㆓シ恆心㆒。

無恒産而有恒心者󠄁는 惟士爲能이어니와
若民則無恒産이면 因無恒心이니라

文字参照

HTMLのマークアップに使われる文字や互換漢字などは、その文字そのものを書いても別の形に変換されてしまう。 これを防ぐには文字参照を用いて別の形で記述する。

例えば<や>はHTMLのマークアップには欠かせない文字である。 下記の説明ではHTMLのマークアップ自体を見える形で表示しているが、当然ただHTMLを書くだけではマークアップは変換されてレンダリングされてしまう。

  • 記述上

<div style="border: solid 3px #000000;"> <p>東京高等裁判所平成27年(ネ)第1347号</p> <p>・依頼者はステロイドを過剰に処方され色素沈着＆パニック障害発症</p> <p>・病院を相手取った控訴審になぜかパカデブを起用(医療に強い唐澤貴夫弁護士と混同した可能性大)</p> <p>・パカデブ、医療訴訟の経験もないのに引き受ける</p> <p>・案の定爆死。医療ミスの事実すら完全に否定され控訴棄却という最悪の結果に</p> <p>・依頼者は病院の責任も追及できず30万ぼったくられて泣き寝入り</p> </div>

  • 実際の表示

東京高等裁判所平成27年(ネ)第1347号

・依頼者はステロイドを過剰に処方され色素沈着＆パニック障害発症

・病院を相手取った控訴審になぜかパカデブを起用(医療に強い唐澤貴夫弁護士と混同した可能性大)

・パカデブ、医療訴訟の経験もないのに引き受ける

・案の定爆死。医療ミスの事実すら完全に否定され控訴棄却という最悪の結果に

・依頼者は病院の責任も追及できず30万ぼったくられて泣き寝入り

「記述上」に示したように表示するには、<の代わりに&lt;と、>の代わりに&gt;と記述している。

  • 編集画面でのHTMLソースの記述

&lt;div style="border: solid 3px #000000;"&gt; &lt;p&gt;東京高等裁判所平成27年(ネ)第1347号&lt;/p&gt; &lt;p&gt;・依頼者はステロイドを過剰に処方され色素沈着＆パニック障害発症&lt;/p&gt; &lt;p&gt;・病院を相手取った控訴審になぜかパカデブを起用(医療に強い唐澤貴夫弁護士と混同した可能性大)&lt;/p&gt; &lt;p&gt;・パカデブ、医療訴訟の経験もないのに引き受ける&lt;/p&gt; &lt;p&gt;・案の定爆死。医療ミスの事実すら完全に否定され控訴棄却という最悪の結果に&lt;/p&gt; &lt;p&gt;・依頼者は病院の責任も追及できず30万ぼったくられて泣き寝入り&lt;/p&gt; &lt;/div&gt;

&lt;と表示したいなら&amp;lt;と記述すれば良い。


文字参照には文字実体参照と数値文字参照とが存在する。

文字実体参照は上記に示したように&lt;のような形で文字を表すものである。 一部の文字にのみ定められている。

数値文字参照はISO/IEC 10646に定められた数字（Unicodeのものと同一）を参照して表示するものである。 例えば<(U+003C)を表示するなら、&#x003C;と記述すれば良い。 これを用いればCJK互換漢字のように正規化されてしまう文字もそのまま表示できる。 但し異体字を表示する目的で用いるなら、互換漢字を用いずにIVS異体字を用いるべきである。

気になる資料

  • Pablo Sánchez Domínguez, Origen y gramática del romance andalusí, Córdoba: Editorial Almuzara, 2020.
  • Fr. Francis T.J. Sdb, First Ever Wancho Grammar cum English-Wancho Tutor, Dimapur: Don Bosco Publications, 2007.
  • Gholam Djelani Davary, Baktrisch : ein Wörterbuch, Heidelberg: Julius Groos, 1982.

どっかにPDFでも落ちてないナリかねえ

脚註

  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=91775」から取得