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

利用者:Fet-Fe

提供:唐澤貴洋Wiki
2024年10月19日 (土) 16:57時点における>Fet-Feによる版 (→‎気になる資料)
ナビゲーションに移動 検索に移動


حَرَقَ تَــــــاكَاهِيرُو كَارَاسَاوَا ٱلْقُرْآنَ وَأَهَانَ مُحَمَّدًا ﷺ

يَخْتَبِئُ فِي شَرِكَةِ Steadiness لِلْمُحَامَاةِ،

مِيتَا-تْسُونَامَاتْشِي Duplex R’s ٣٠١،

٢-٢-١٥ مِيتَا، حَيِّ مِينَاتُو، طُوكِيُو، ١٠٨-٠٠٧٣ ٱلْيَابَانِ

فَٱقْتُلُوهُ حَيْثُ وَجَدتُّمُوهُ

آمِينَ

連絡はトークページまでお願いします

夜泣きの魚拓取得用スクリプト

利用者:夜泣き/スクリプトをお借りして作業しています

Unicodeのノウハウ

結合文字

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

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

ヴィラーマ

サンスクリットなどの表記に用いられるアブギダの子音字はデフォルトで母音aを持つ。母音を持たないことを示すためにはヴィラーマ(梵: ཝི་རཱ་མ། virāma、巴: විරාම virāma)を追加する必要がある。 多くのアブギダでヴィラーマは子音字同士を結合させる。デーヴァナーガリーの場合は

स + ◌् + थ → स् + थ → स्थ

のように結合する。

シンハラ文字の ්(අල් ලකුණ al-lakuṇaまたはහල් ලකුණ hal-lakuṇa、ヴィラーマに相当)はデフォルトでは合字を作らないが、ゼロ幅接合子を使うと合字になる。

チベット文字の◌྄(སྲོག་མེད། srog med、ヴィラーマに相当)は基本的に使われず、普通は་ (ཚེག tsheg)で区切られた音節内の位置で母音の有無が判断される。 saṃskṛtamと書く場合はསཾ་ས྄ཀ྄རྀ་ཏ་མ྄།ではなく、སཾསྐྲྀ་ཏམ།となる。 また、チベット語のbod yigབོད་ཡིགとなる。

パスパ文字や、アブギダではないアリ・ガリ文字には抑もヴィラーマがないため、チベット文字と同様の書き方となる。 但し区切りはtshegではなくスペースになる。 以下はsaṃskṛtambod yigをそれぞれの文字で書いたものである。

パスパ文字: ꡳꡛ ꡛꡀꡱꡞ ꡈꡏ
ꡎꡡꡊ ꡗꡞꡂ

アリ・ガリ文字: ᢀᠰᠠ᠋ ᠰᢉᠠᠷᢈ ᢐᠠᠮ
ᠪᠣᠸᠠᢑ ᠶ᠋ᢈᠺ᠋

満洲アリ・ガリ文字: ᢀᠰᠠ ᠰᡤᡳᡵ᠋ᡳ ᢠᠠᠮ
ᠪᠣᡨ ᠶᡳᡴ

トド文字: ᢀ᠋ᠰᠠ᠋ ᠰᠺᠠᠷᢧ᠋ ᢐᠠᡏ
ᡋᡆᡑ ᡕᡅᡎ

横書き方形文字の場合は、モンゴル語/チベット語用の終端子音記号(𑨳、U+11A33)、梵語/チベット語用のヴィラーマ(𑨴、U+11A34)、梵語とチベット語で使われる文字結合用のsubjoiner(𑩇、U+11A47)がそれぞれ別の文字コードに割り当てられている。 チベット語の場合は、終端子音記号(U+11A33)と𑩁 (𑨤𑨄𑨍 tsheg、U+11A41)のいずれかをチベット文字のtshegの代わりに利用する。

梵語: 𑨰𑨸𑨰𑩇𑨋𑨼𑨉𑨙𑨢𑨴 (saṃskṛtam)

モンゴル語: 𑨢𑨆𑨏𑨳𑨋𑨆𑨬𑨳 (moŋɣol)

チベット語: 𑨠𑨆𑨛𑩁𑨪𑨁𑨍 / 𑨠𑨆𑨛𑨳𑨪𑨁𑨍𑨳 (bod yig)

ソヨンボ文字の場合は、モンゴル語の終端子音記号(U+11A8A~U+11A95)と、梵語とチベット語で使われる文字結合用のsubjoiner(𑪙、U+11A99)が存在する。 チベット語の場合は𑪚 (𑩶𑩔𑩞 tsheg、U+11A9A)をチベット文字のtshegの代わりに利用する。 梵語の終端子音を明示的に表す方法は無く、文脈から判断する必要がある。

梵語: 𑪁𑪖𑪁𑪙𑩜𑩙𑩫𑩴 (saṃskṛtam)

モンゴル語: 𑩴𑩖𑪌𑩜𑩖𑪒 (moŋɣol)

チベット語: 𑩲𑩖𑩭𑪚𑩻𑩑𑩞 (bod yig)

漢字構成記述文字

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

異体字セレクタ

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

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

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

アポストロフィ

キーボードから入力しやすいのは'(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)が推奨される。ソフトウェアによっては自動で置換される。 トラパネコ語やラパ・ヌイ語など、直線的なアポストロフィが必要な言語ではꞌ(LATIN SMALL LETTER SALTILLO、U+A78C)やꞋ(LATIN CAPITAL LETTER SALTILLO、U+A78B)が利用される[6]

他にウズベク語やハワイ語で用いられるʻ(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)の代わりに用いられる。

双方向テキスト

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

أَقْتُلُ تَاكَاهِيرُو كَارَاسَاوَا.

ピリオドの後ろにRight-to-left mark (RLM, U+200F, &rlm;)やArabic letter mark(ALM, U+061C)を付ければ正しい表示がなされる。 下の例では、<span lang="he">אהרוג את טאקאהירו קאראסאווה.&rlm;</span><span lang="ar">أَقْتُلُ تَاكَاهِيرُو كَارَاسَاوَا.&#x061C;</span>と記述した。

אהרוג את טאקאהירו קאראסאווה.‏
أَقْتُلُ تَاكَاهِيرُو كَارَاسَاوَا.؜

RLMとALMとの違いは、Unicodeの双方向アルゴリズム[7]に関係している。 Unicodeの各文字にはBidirectional Character Typeが設定されている[8]。 このうち強い属性としてはL (左から右)、R (右から左)、AL (アラビア文字の右から左)がある。 RLMはR属性、ALMはAL属性を持つ。 これらは双方向アルゴリズムに於いて後続する弱い属性の扱いに影響する。 例えばW2という手続きでは、AL属性の文字の後ろにEN (European Number)が後続する場合、そのENはAN (Arabic Number)扱いになるが、R属性に後続するENはENのままとなる。 AL属性の文字には、アラビア文字の他にもシリア文字、ターナ文字、ハニーフィー・ロヒンギャ文字、ソグド文字などがある[9]

カンマ(،、ARABIC COMMA、U+060C)やパキスタンのナスタアリーク体で用いられる句点(۔、ARABIC FULL STOP、U+06D4)、アフリカのアジャミーの句点(؞、ARABIC TRIPLE DOT PUNCTUATION MARK、U+061E)などの句読点はもとよりAL属性を持つため、Arabic letter markは不要。 またAL属性やRTL属性の文字で挟んでもRight-to-left markやArabic letter markは不要。

ちなみに書字方向を制御する特殊文字を利用した攻撃方法も存在する[10]。悪用してはいけない(戒め)

HTMLで同様の動作をさせるには#dir属性を参照。この方法と組み合わせても良い[11]

スペースとゼロ幅文字

スペース

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

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

通常のスペース: ꡏꡡꡃ ꡢꡡꡙ、U+202F: ꡏꡡꡃ ꡢꡡꡙ

単語結合子、ゼロ幅スペース

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

ゼロ幅非接合子

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

ウイグル語などテュルク語族やクルド語などで用いられるアラビア文字のうち、母音を表すهは後ろに文字が来てもアラビア語の語中形のようにならず、«ئاللاھۇ ئەكبەر»のように語末形のままとなる。これを表すには、中国のテュルク語やクルド語ではە‎(U+06D5)が使われる。 一方、イランやアフガニスタンのテュルク語や古いテュルク語では通常のアラビア文字のه(U+0647)とゼロ幅非接合子を組み合わせて表現される。

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

デュプロワイエ式速記では単語内での音節の切れ目に利用される。𛰣𛱇‌𛰚𛱛𛰅 𛱜‌𛱜 (Chinook wawa)はこれがないと𛰣𛱇𛰚𛱛𛰅 𛱜𛱜という表示になってしまう。

ゼロ幅接合子

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

ञ + ◌् + U+200D → ञ् + U+200D → ञ्‍

アラビア文字でも同様になる。 アラビア語の一文字の前置詞は後続の単語と結合するが、後続の単語がアラビア文字でなかったとき、独立形で書かれる場合と頭字形で書かれる場合とがある。 後者の場合、このサイト(魚拓)に見られるように«بـToshiba»と表せる。 この例ではカシーダ(ARABIC TATWEEL、U+0640)を用いてبを頭字形にしているが、カシーダの分長くなってしまうので«ب‍؜Toshiba»のようにゼロ幅接合子を用いるのが良い。 なおソーステキスト上ではب&#x200D;&#x061C;ToshibaのようにArabic letter markと組み合わせている。 これは本来L属性扱いになるゼロ幅接合子をAL属性に変えるためである。

シンハラ文字の ්(U+0DCA、අල් ලකුණ al-lakuṇaまたはහල් ලකුණ hal-lakuṇa、ヴィラーマに相当)はデフォルトでは合字を作らない。

ද + ් + ධ → ද්ධ

一方でゼロ幅接合子を用いることで、合字を表示できる。但しフォントが対応していなければならない。

ද + U+200D + ් + ධ → ද‍්ධ
ද + ් + U+200D + ධ → ද්‍ධ

ゼロ幅接合子がal-lakuṇaの前に来れば結合、後に来れば省略の上で結合形となる。 またරの後、ය、රの前に් + U+200Dが来る場合にはそれぞれරේඵය (rēphaya), යංශය (yaṃśaya), රකාරාංශය (rakārāṃśaya)と呼ばれる特別な形になる[12]

ර + ් + U+200D + ක → ර්‍ක
ක + ් + U+200D + ය → ක්‍ය
ක + ් + U+200D + ර → ක්‍ර

ハイフン、マイナス、ハイフンマイナス

Unicodeには横棒の似たような文字が多数ある。 キーボードから打つのが一番簡単なのは-(HYPHEN-MINUS、U+002D)であるが、これはUnicode以前のハイフンやマイナスが区別されていなかった規格との互換性を保つための文字である。 Unicodeではハイフン(‐、U+2010)、NON-BREAKING HYPHEN(‑、U+2011、改行が起こらない)、HYPHEN BULLET(⁃、U+2043)、ソフトハイフン(­、U+00AD、英語の語中で改行される場合に可視化される)、算術記号のマイナス(−、U+2212)、各種ダッシュなどが区別されている。

ちなみに日本語の「レオナルド゠ダ゠ヴィンチ」のように語区切りや英文のハイフンの置き換えで用いられるのは、普通の等号(=、U+003D)ではなくKATAKANA-HIRAGANA DOUBLE HYPHEN(゠、U+30A0)である。 英文用には別のDOUBLE HYPHEN(⹀、U+2E40)がある。

HTMLとCSSのノウハウ

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

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

lang属性

言語を定義する[13]

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

ウルドゥー語のlang="ur"を指定して<span lang="ur" dir="rtl">تاکاہیرو کاراساوا نے قُرْآن کو جَلایا وَ مُحَمَّد کو تَوہین کِیا۔</span>とすれば、環境によっては自動でナスタアリーク体のフォントを使用してくれる。

تاکاہیرو کاراساوا نے قُرْآن کو جَلایا وَ مُحَمَّد کو تَوہین کِیا۔

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

言語コードについてはISO 639-1ISO 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属性

書字方向を示す[14]

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

تاکاهيرو کاراساوا ممباکر القرءان دان مڠهينا محمد.

dir="rtl"を設定して<span lang="ms-Arab" dir=rtl>تاکاهيرو کاراساوا ممباکر القرءان دان مڠهينا محمد.</span>とすれば正しい表示がなされる。

تاکاهيرو کاراساوا ممباکر القرءان دان مڠهينا محمد.

Unicodeで同様の動作をさせるには#双方向テキストを参照。この方法と組み合わせても良い。

縦書き

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

左: <span style="writing-mode: vertical-rl;">2021年に唐澤貴洋knifeで<br>メッタ刺しにして殺す。</span>

右: <span style="writing-mode: vertical-rl; text-orientation: upright;">2021年に唐澤貴洋knifeで<br>メッタ刺しにして殺す。</span>

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

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

ᠮᠤᠩᠭᠤᠯ
ᠬᠡᠯᠡ

パスパ文字の場合も同様。

ꡎ ꡒꡱ ꡗꡖ ꡋ
ꡲꡊꡡ ꡲꡆꡠ ꡉꡠꡂ ꡌ

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

𐽳𐽶𐽲𐽳𐽾
𐾀𐽶𐾁

右横書き

日本語でかつて用いられていた右横書きはCSSでdirection: rtl; unicode-bidi: bidi-override;[17]で実現できる。 但し下のように多くの環境で約物が逆向きになる。

「唐澤貴洋殺す。」

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

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

「唐澤貴洋殺す。」


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

デフォルトのltr綴字方向では以下のように表示される。

𓂋𓐰𓏺𓈖𓆎𓅓𓏏𓐰𓊖
𐌓𐌀𐌔𐌍𐌀

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

𓂋𓐰𓏺𓈖𓆎𓅓𓏏𓐰𓊖
𐌓𐌀𐌔𐌍𐌀

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

𓂋𓐰𓏺𓈖𓆎𓅓𓏏𓐰𓊖

𐌓𐌀𐌔𐌍𐌀

一応Unicodeの勧告ではデフォルトのltr方向が上書きされてrtl属性を持った場合左右反転すべきだとしている[22][23]。 これに従っているフォントであれば、direction: rtl; unicode-bidi: bidi-override;を適用すればrotateYしなくても文字が反転してくれる。

𓂋𓐰𓏺𓈖𓆎𓅓𓏏𓐰𓊖
𐌓𐌀𐌔𐌍𐌀

但しフォントにこの機能が付いていないことも考えられるので、transform: rotateY(180deg);の方が確実である。

ルビ

rubyタグ

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

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

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

更にrpタグを用いることで、rubyタグへの対応が無いブラウザでの表示をコントロールできる。検索結果のスニペットにも現れるので、利用した方が良い。

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

唐澤貴洋(당택귀양)

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

唐澤貴洋(당택귀양)

上の韓国語の例では、ハングルが詰まっているために漢字との対応が見づらくなっている。 これを解決するためにrbタグを用いるように解説しているサイトもあるが、標準ではなく推奨されておらず[25]、動作も安定しない。 面倒でも一文字ずつ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というものが定められている[26]が、これを実装しているブラウザは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タグ[27]を用いてルビをグループ化する。 但しこれも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日現在正式な実装がされていないため、ベンダープレフィックスを付けなければならない[28]。 また取ることのできる値もW3Cの定めたものとは異なる。ここでは-webkit-ruby-position: after;と記述している。

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

subタグ・supタグ

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

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

솅〮조ᇰᅌᅥᆼ〮졩〮훈〮져ᇰ〮ᅙᅳᆷ

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

ㅣ爲〬윙〮ᄎᆞᆼ〯민〯ᅀᅧᆫᄒᆞ〮야〮
졩〮ᅀᅵᆼ〮씹〮바ᇙ〮ᄍᆞᆼ〮ᄒᆞ〮노니〮
욕〮使ᄉᆞᆼ〯ᅀᅵᆫᅀᅵᆫᄋᆞ〮로〮易〬잉〮씹〮ᄒᆞ〮야〮
便ᅙᅥᆼᅀᅵᇙ〮요ᇰ〮ᅀᅵᆼ〯니라〮

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

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

CSSグリッドレイアウト

CSSグリッドレイアウトを用いれば、様々な要素を2次元に配置することができる。 display: grid;プロパティやdisplay: inline-grid;プロパティを指定し、grid-template-rowsgrid-template-columnsでグリッドの区切り方を設定して、grid-rowgrid-columnで要素の位置を決定する。 詳しくは[32][33]を参照。

ごと は以下のHTMLで実現している。

<ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; align-items: center; vertical-align: middle;"> <span style="grid-row: 2/4; grid-column: 1/4;">若</span> <rt style="grid-row: 1; grid-column: 1/4; font-size: .5em;">ごと</rt> <sup style="grid-row: 1; grid-column: 3; font-size: .5em;">シ</sup> <sub style="grid-row: 3; grid-column: 3; font-size: .5em;">㆑</sub> </ruby>

このレイアウトやrubyタグ、sub/subタグなどを用いて漢文の返り点や吐などを表記することができる。 但し返り点と送り仮名は[34][35]に従っている。

クシテ 有󠄁 恆心 者󠄁、 ノミ 能。 クスルヲ
キハ ケレバ 產、 リテ 心。

無恒産而有恒心者󠄁惟士爲能乀仒匕卜
若民則無恒産乀丆因無恒心乀匕亽

無恒産而有恒心者󠄁ᄂᆞᆫ 惟士ᅟᅵ爲能이어
니와

若民則無恒産이면 因無恒心이니


まさ 殺󠄀 ころ サント 唐󠄁 から さは たか 洋。 ひろ

將殺󠄀唐󠄁澤貴洋丷飞匕亽

將殺󠄀唐󠄁澤貴洋ᄒᆞᄂᆞ
니라

positionプロパティ

CSSのposition: relative;position: absolute;を組み合わせて、特定の範囲内に要素を配置することができる[36]

ある要素にposition: relative;を指定して、top: 10%;left: 40px;などを指定すると、その要素が本来あった場所から下側に要素の大きさの10%、右に40pxずらすことができる。 position: absolute;を指定して同様にtopleft(またはbottomright)を指定すると、直近の位置指定されている祖先(positionの計算値がstatic以外である祖先)またはそれが無ければページ全体の初期位置から指定した分だけずれた位置に配置できる。

これを利用すれば、ある位置のspanタグにposition: relative;を指定してtopなどは指定せず、その中の要素にposition: absolute;topなどを指定することで要素の位置をposition: relative;のタグの中で調節することができる。

次に示す例では、<span lang="jsl" style="position: relative;"><span style="position: absolute; top: 0.05em; left: -1em;">𝠀𝪛𝪪</span><span style="position: absolute; top: 0; left: -0.3em;">𝧫𝪛𝪬</span><span style="position: absolute; top: 0.05em; left: 0.3em;">𝧫</span><span style="position: absolute; top: 0.15em; left: 1em;">𝠀𝪛𝪢</span></span>と記述している。

 𝠀𝪛𝪪𝧫𝪛𝪬𝧫𝠀𝪛𝪢

順序付きリスト

MediaWikiでは*で始まる行は番号なしリスト、#で始まる行は番号付きリストとして表示される(Help:リスト)。

番号付きリストの番号の種類を変更したい場合には、HTMLのolタグとCSSのlist-style-typeプロパティを利用する必要がある。 利用できる番号の一覧はMozillaのlist-style-typeのページから確認できる。

以下の例では、<ol style="list-style-type: tibetan; column-count: 2;">によって、チベット文字の数字を設定している。各リスト項目を記載するliタグには何のプロパティも指定していない。

༄༅། །ཨཥྚཱ་དྷྱཱ་ཡཱི༎

བཱ་ཀྱ་ཀཱ་རཾ་བ་ར་རུ་ཙིཾ་བྷཱ་ཥྱ་ཀཱ་རཾ་པ་ཏཉྫ་ལིམ།

པཱ་ཎི་ནིཾ་སཱུ་ཏྲ་ཀཱ་རཾ་ཙ་པྲ་ཎ་ཏོ྅སྨི་མུ་ནི་ཏྲ་ཡམ༎

ཨ་ཐ་པྲ་ཐ་མོ྅དྷྱཱ་ཡཿ། པྲ་ཐ་མཿཔཱ་དཿ།

  1. བྲྀདྡྷི་རཱ་དཻཙ།
  2. ཨ་དེང་གུ་ཎཿ།
  3. ཨི་ཀོ་གུ་ཎ་བྲྀདྡྷཱི།
  4. ན་དྷཱ་ཏུ་ལོ་པ་ཨཱརྡྷ་དྷཱ་ཏུ་ཀེ
  5. ཀྔི་ཏི་ཙ།
  6. དཱི་དྷཱི་ཝེ་ཝཱི་ཊཱམ།
  7. ཧ་ལོ྅ནནྟ་རཱཿསཾ་ཡོ་གཿ།
  8. མུ་ཁ་ནཱ་སི་ཀཱ་བ་ཙ་ནོ྅ནུ་ནཱ་སི་ཀཿ།
  9. ཏུ་ལྱཱ་སྱ་པྲ་ཡཏྣཾ་ས་བརྞམ།
  10. ནཱཛྫྷ་ལཽ།
  11. ཨཱི་དཱུ་དེདྡྭི་བ་ཙ་ནཾ་པྲ་གྲྀ་ཧྱམ།
  12. ཨ་ད་སོ་མཱཏ།
  13. ཤེ
  14. ནི་པཱ་ཏ་ཨེ་ཀཱ་ཛ་ནཱང་།
  15. ཨོཏ།
  16. སམྦུདྡྷཽ་ཤཱ་ཀ་ལྱ་སྱེ་ཏཱ་བ་ནཱརྵེ།
  17. ཨུ་ཉཿ།
  18. ཨཱུྃ།
  19. ཨཱི་དཱུ་ཏཽ་ཙ་སཔྟམྱརྠེ།
  20. དཱ་དྷཱ་གྷྭ་དཱཔ།

list-style-typeのページに存在しない数字などについては、自分で番号を書く必要がある。

以下の例では、バイクシュキー文字の数字をリスト番号とするために、olタグにはstyle="list-style-type: none; column-count: 2;"を設定し、デフォルトで表示される番号を非表示にしている。 更に各liタグは<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱚.</span>𑰪𑰴𑰟𑰿𑰠𑰰𑰨𑰯𑰟𑰹𑰓𑰿𑱁</li>のように記載している。 user-selectは2024年8月4日現在Safariに対応していないため、ベンダープレフィックスも指定している。

𑰀𑰬𑰿𑰘𑰯𑰠𑰿𑰧𑰯𑰧𑰱

𑰌𑰼

𑰪𑰯𑰎𑰿𑰧𑰎𑰯𑰨𑰽𑱃𑰪𑰨𑰨𑰲𑰓𑰰𑰽𑱃𑰥𑰯𑰬𑰿𑰧𑰎𑰯𑰨𑰽𑱃𑰢𑰝𑰗𑰿𑰕𑰩𑰰𑰦𑰿𑱁

𑰢𑰯𑰜𑰰𑰡𑰰𑰽𑱃𑰭𑰳𑰝𑰿𑰨𑰎𑰯𑰨𑰽𑱃𑰓𑱃𑰢𑰿𑰨𑰜𑰝𑰺𑱀𑰭𑰿𑰦𑰰𑱃𑰦𑰲𑰡𑰰𑰝𑰿𑰨𑰧𑰦𑰿𑱂

𑰀𑰞𑱃𑰢𑰿𑰨𑰝𑰦𑰺𑱀𑰠𑰿𑰧𑰯𑰧𑰾𑱁 𑰢𑰿𑰨𑰝𑰦𑰾𑱃𑰢𑰯𑰟𑰾𑱁

  1. 𑱚.𑰪𑰴𑰟𑰿𑰠𑰰𑰨𑰯𑰟𑰹𑰓𑰿𑱁
  2. 𑱛.𑰀𑰟𑰸𑰒𑰿𑱃𑰐𑰲𑰜𑰾𑱁
  3. 𑱜.𑰂𑰎𑰺𑱃𑰐𑰲𑰜𑰪𑰴𑰟𑰿𑰠𑰱𑱁
  4. 𑱝.𑰡𑱃𑰠𑰯𑰝𑰲𑰩𑰺𑰢𑱃𑰁𑰨𑰿𑰠𑰠𑰯𑰝𑰲𑰎𑰸𑱁
  5. 𑱞.𑰎𑰿𑰒𑰰𑰝𑰰𑱃𑰓𑱁
  6. 𑱟.𑰟𑰱𑰠𑰱𑰪𑰸𑰪𑰱𑰘𑰯𑰦𑰿𑱁
  7. 𑱠.𑰮𑰩𑰺𑱀𑰡𑰡𑰿𑰝𑰨𑰯𑰾𑱃𑰭𑰽𑰧𑰺𑰐𑰾𑱁
  8. 𑱡.𑰦𑰲𑰏𑰡𑰯𑰭𑰰𑰎𑰯𑰪𑰓𑰡𑰺𑱀𑰡𑰲𑰡𑰯𑰭𑰰𑰎𑰾𑱁
  9. 𑱢.𑰝𑰲𑰩𑰿𑰧𑰯𑰭𑰿𑰧𑰢𑰿𑰨𑰧𑰝𑰿𑰡𑰽𑱃𑰭𑰪𑰨𑰿𑰜𑰦𑰿𑱁
  10. 𑱣.𑰡𑰯𑰕𑰿𑰖𑰩𑰻𑱁
  11. 𑱣𑱚.𑰃𑰟𑰳𑰟𑰸𑰟𑰿𑰟𑰿𑰪𑰰𑰪𑰓𑰡𑰽𑱃𑰢𑰿𑰨𑰐𑰴𑰮𑰿𑰧𑰦𑰿𑱁
  12. 𑱣𑱛.𑰀𑰟𑰭𑰺𑱃𑰦𑰯𑰝𑰿𑱁
  13. 𑱣𑱜.𑰫𑰸𑱁
  14. 𑱣𑱝.𑰡𑰰𑰢𑰯𑰝𑱃𑰊𑰎𑰯𑰕𑰡𑰯𑰒𑰿𑱁
  15. 𑱣𑱞.𑰌𑰝𑰿𑱁
  16. 𑱣𑱟.𑰭𑰦𑰿𑰤𑰲𑰟𑰿𑰠𑰻𑱃𑰫𑰯𑰎𑰩𑰿𑰧𑰭𑰿𑰧𑰸𑰝𑰯𑰪𑰡𑰯𑰨𑰿𑰬𑰸𑱁
  17. 𑱣𑱠.𑰄𑰗𑰾𑱁
  18. 𑱣𑱡.𑰅𑰼𑱁
  19. 𑱣𑱢.𑰃𑰟𑰳𑰝𑰻𑱃𑰓𑱃𑰭𑰢𑰿𑰝𑰦𑰿𑰧𑰨𑰿𑰞𑰸𑱁
  20. 𑱤.𑰟𑰯𑰠𑰯𑱃𑰐𑰿𑰪𑰟𑰯𑰢𑰿𑱁


モンゴル文字の場合にも、list-style-type: mongolian;を指定すれば番号を変更できる。

横書きの中に埋め込んだ縦書きリストの場合には、番号が上の行と重なってしまう可能性があるため、十分な数の改行を入れてスペースを取る必要がある。


ᠠ᠋ ᢔᢌᠠ᠋᠎ᠠ ᢑᠾᢈ᠎ᠠ᠎ᠠ ᠶ᠋ᢈᢈ

ᢀᠣᠸᠠ

ᠸᠠ᠋᠎ᠠ ᢉᢈ᠎ᠠ ᢉᠠ᠎ᠠ ᢀᠷᠠ᠋ ᠸᠠ᠋ ᠷᠠ᠋ ᠷᠦ᠍ ᢀᢋᢈ ᠪᠾᠠ᠋᠎ᠠ ᢔᢈ᠎ᠠ ᢉᠠ᠎ᠠ ᢀᠷᠠ᠋ ᢒᠠ ᢐᠠ᠋ ᡛᠽᠠ᠋ ᠯᢈᠮ᠃

ᢒᠠ᠎ᠠ ᢏᢈ ᢀᠨᢈ ᠰᠣᠦ ᢐᠷᠠ᠋ ᢉᠠ᠎ᠠ ᢀᠷᠠ᠋ ᢋᠠ᠋ ᢒᠷ᠎ᠠ ᢏᠠ᠋ ᢐᢅᠣᠸᠠ ᠰᠮᢈ ᠮᠦ᠍ ᠨᢈ ᢐᠷᠠ᠋ ᠶ᠋ᠠᠮ᠅

ᠠ᠋ ᠲᠠ᠋ ᢒᠷ᠎ᠠ ᠲᠠ᠋ ᠮᢅᠣᠸᠠ ᢑᠾᢈ᠎ᠠ᠎ᠠ ᠶ᠋ᠠ᠋ᢁ᠋᠃ ᢒᠷ᠎ᠠ ᠲᠠ᠋ ᠮᠠ᠋ᢁ᠋ ᢒᠠ᠎ᠠ ᢑᠠ᠋ᢁ᠋᠃

  1. ᠪᠠᠷᢈ ᢑᢑᠾᢈ ᠷᠠ᠋᠎ᠠ ᢑᠧᠧᢋ᠃
  2. ᠠ᠋ ᢑᠧᢊ ᠺᠦ ᢏᠠ᠋ᢁ᠋᠃
  3. ᢈ ᢉᠣᠸᠠ ᠺᠦ ᢏᠠ᠋ ᠪᠠᠷᢈ ᢑᢑᠾᢈᢈ᠃
  4. ᠨᠠ᠋ ᢑᠾᠠ᠋᠎ᠠ ᢐᠦ᠍ ᠯᠣᠸᠠ ᢒᠠ ᠠ᠋᠎ᠠ ᠷᢑᠾᠠ᠋ ᢑᠾᠠ᠋᠎ᠠ ᢐᠦ᠍ ᢉᠧ᠃
  5. ᢉᢊᢈ ᢐᢈ ᢋᠠ᠋᠃
  6. ᢑᢈᢈ ᢑᠾᢈᢈ ᠸᠧ ᠸᢈᢈ ᢌᠠᢗ᠊ᠮ᠃
  7. ᠾᠠ᠋ ᠯᢅᠣᠸᠠ ᠨᠠ᠋ ᠨᢐᠠ᠋ ᠷᠠ᠋᠎ᠠᢁ᠋ ᢀᠰᠠ᠋ ᠶ᠋ᠣᠸᠠ ᠺᠠᢁ᠋᠃
  8. ᠮᠦ᠍ ᠻᠠ ᠨᠠ᠋᠎ᠠ ᠰᢈ ᢉᠠ᠎ᠠ ᠸᠠ᠋ ᢋᠠ᠋ ᠨᢅᠣᠸᠠ ᠨᠦ᠍ ᠨᠠ᠋᠎ᠠ ᠰᢈ ᢉᠠᢁ᠋᠃
  9. ᢐᠦ᠍ ᠯᢈ᠎ᠠ᠎ᠠ ᠰᢈ᠎ᠠ ᢒᠷ᠎ᠠ ᠶ᠋ᠠ᠋ ᢀᢐᠨᠠ᠋ ᠰᠠ᠋ ᠸᠠ᠋ ᠷᢏᠠᠮ᠃
  10. ᠨᠠ᠋᠎ᠠ ᠽᠽᠾᠠ᠋ ᠯᠣᠸᠸᠠ᠃
  11. ᢈᢈ ᢑᠣᠦ ᢑᠧ ᢑᢑᠸᢈ ᠸᠠ᠋ ᢋᠠ᠋ ᢀᠨᠠ᠋ ᢒᠷ᠎ᠠ ᠺᠠᠷᢈ ᠾᠶ᠋ᠠᠮ᠃
  12. ᠠ᠋ ᢑᠠ᠋ ᠰᠣᠸᠠ ᠮᠠᢗᢐ᠃
  13. ᠱᠧ᠃
  14. ᠨᢈ ᢒᠠ᠎ᠠ ᢐᠠ᠋ ᠧ ᢉᠠ᠎ᠠ ᠽᠠ᠋ ᠨᠠᢗᢊ᠃
  15. ᠣᠸᠠᢐ᠃
  16. ᠰᠠ᠋ ᠮᠪᠦ ᢑᢑᠾᠣᠸᠸᠠ ᠱᠠ᠋᠎ᠠ ᢉᠠ ᠯᢈ᠎ᠠ ᠰᠶ᠋ᠧ ᢐᠠ᠋᠎ᠠ ᠸᠠ᠋ ᠨᠠ᠋᠎ᠠ ᠷᢔᠧ᠃
  17. ᠦ᠋ ᡛᠠ᠋ᢁ᠋᠃
  18. ᢀᠣᠦ᠃
  19. ᢈᢈ ᢑᠣᠦ ᢐᠣᠸᠸᠠ ᢋᠠ᠋ ᠰᠠ᠋ ᢒᢐᠠ᠋ ᠮᢈ᠎ᠠ ᠷᠲ᠋ᠧ᠃
  20. ᢑᠠ᠋᠎ᠠ ᢑᠾᠠ᠋᠎ᠠ ᠺᠾᢦ ᢑᠠᢗᢒ᠃

しかし、モンゴル数字には多様な書字方向があり、再現するには工夫が必要となる。

これを修正するには、本来のHTML+CSSなら::marker擬似要素[37]を利用するが、MediaWikiではCommon.cssを編集しないと利用できない。 そのため、それ以外の方法でうまく調整する必要がある。

下の例では、各項目を<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.5em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠑</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᠪᡳᡵ᠋ᡳ ᡩᢡᡳ ᡵᠠᢇ ᡩ᠋ᡝ᠋ᡳ᠌ᢜ᠈</li>として表示を変更している。 バイクシュキー文字でright方向にかけていた調節と同様のものをbottom方向にかけているが、数字だけ横書きにするためにwriting-mode: horizontal-tb;を設定している。その上、数字の位置を調整するため、1桁ならばleft: 0.5em;、2桁ならばleft: 0.25em;を指定している。


ᠠ ᢢᢞᠠᢇ ᢡᠶᠠᢇ ᠶᡳᡳ

ᢀᠣ

ᠸᠠᢇ ᡬᠶᠠ ᡬᠠᢇ ᢀᡵᠠ ᠸᠠ ᡵᠠ ᡵᡠ᠌ ᢀᢜᡳ᠌ ᢨᠠᢇ ᢢᠶᠠ ᡬᠠᢇ ᢀᡵᠠ ᢒᠠ ᢠᠠ ᠨᡳᠶᡯᠠ ᠯᡳᠮ᠈

ᢒᠠᢇ ᢏᡳ ᢀᠨᡳ ᠰᡠᠣ ᢠᡵᠠ ᡬᠠᢇ ᢀᡵᠠ ᢜᠠ ᢒᡵᠠ ᢏᠠ ᢠᢅᠣ᠋ ᠰᠮᡳ ᠮᡠ᠌ ᠨᡳ ᢠᡵᠠ ᠶᠠᠮ᠉

ᠠ ᡨ᠋ᠠ ᢒᡵᠠ ᡨ᠋ᠠ ᠮᢅᠣ᠋ ᢡᠶᠠᢇ ᠶᠠᢁ᠈ ᢒᡵᠠ ᡨ᠋ᠠ ᠮᠠᢁ ᢒᠠᢇ ᡩᠠᢁ᠈

  1. ᠪᡳᡵ᠋ᡳ ᡩᢡᡳ ᡵᠠᢇ ᡩ᠋ᡝ᠋ᡳ᠌ᢜ᠈
  2. ᠠ ᡩ᠋ᡝ᠋ᠩ ᡤᡡ ᢏᠠᢁ᠈
  3. ᡳ ᡬᠣ ᡤᡡ ᢏᠠ ᠪᡳᡵ᠋ᡳ ᡩᢡᡳᡳ᠈
  4. ᠨᠠ ᢡᠠᢇ ᢠᡠ᠍ ᠯᠣ᠋ ᢒᠠ ᠠᢇ ᡵᢡᠠ ᢡᠠᢇ ᢠᡠ᠍ ᡤᡝ᠈
  5. ᡬᢛᡳ ᢠᡳ ᢜᠠ᠈
  6. ᡩᡳᡳ ᢡᡳᡳ ᠸᡝ ᠸᡳᡳ ᢞᠠ‌᠇ᠠᠮ᠈
  7. ᡥᠠ ᠯᢅᠣ᠋ ᠨᠠ ᠨᢠᠠ ᡵᠠᢇᢁ ᢀᠰᠠ ᠶᠣ᠋ ᡤᠠᢁ᠈
  8. ᠮᡠ᠌ ᠺᠠ ᠨᠠᢇ ᠰᡳ ᡬᠠᢇ ᠸᠠ ᢜᠠ ᠨᢅᠣ᠋ ᠨᡠ᠌ ᠨᠠᢇ ᠰᡳ ᡬᠠᢁ᠈
  9. ᢠᡠ᠍ ᠯᠶᠠᢇ ᠰᠶᠠ ᢒᡵᠠ ᠶᠠ ᢀᢠᠨᠠ ᠰᠠ ᠸᠠ ᡵᢏᠠᠮ᠈
  10. ᠑᠐ᠨᠠᢇ ᡯᢝᠠ ᠯᠣᠣ᠈
  11. ᠑᠑ᡳᡳ ᡩ᠋ᡠ᠋ᠣ ᡩ᠋ᡝ᠋ ᡩᡩ᠋ᠸᡳ ᠸᠠ ᢜᠠ ᢀᠨᠠ ᢒᡵᠠ ᡤ᠌ᡳᡵ᠋ᡳ ᡥᠶᠠᠮ᠈
  12. ᠑᠒ᠠ ᡩᠠ ᠰᠣ᠋ ᠮᠠ‌᠇ᠠᢠ᠈
  13. ᠑᠓ᡧᡝ᠈
  14. ᠑᠔ᠨᡳ ᢒᠠᢇ ᢠᠠ ᡝ ᡬᠠᢇ ᡯᠠ ᠨᠠ‌᠇ᠠᠩ᠈
  15. ᠑᠕ᠣᢠ᠈
  16. ᠑᠖ᠰᠠ ᠮᠪᡠ ᡩᢡᠣᠣ ᡧᠠᢇ ᡬᠠ ᠯᠶᠠ ᠰᠶᡝ ᢠᠠᢇ ᠸᠠ ᠨᠠᢇ ᡵᢢᡝ᠈
  17. ᠑᠗ᡠ ᠨᡳᠶᠠᢁ᠈
  18. ᠑᠘ᢀᡠᠣ᠈
  19. ᠑᠙ᡳᡳ ᡩ᠋ᡠ᠋ᠣ ᢠᠣᠣ ᢜᠠ ᠰᠠ ᢒᢠᠠ ᠮᠶᠠ ᡵᡨᡝ᠋᠈
  20. ᠒᠐ᡩᠠᢇ ᢡᠠᢇ ᢚᠣᠸᠠ ᡩᠠ‌᠇ᠠᢒ᠈

また下の例では、数字を直立させるためにtext-orientation: upright;を設定している。 <li style="position: relative;"><span style="text-orientation: upright; position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠑᠂</span>ᡖᠠᠷᢧ᠋ ᡑᡑᡙᡅ ᠷᡃᠠ᠋ ᡑᡄᡄᡓ᠃</li>のように記載している。


ᠠ᠋ ᢔᢌᡃᢇ᠋ ᡑᡙᡃᢧ ᡕᡅᡃ

ᢀᡆ

ᡖᡃᠠ᠋ ᠺᢧ ᠺᠠᡃ ᢀ᠋ᠷᠠ᠋ ᡖᠠ᠋ ᠷᠠ᠋ ᠷᡉ ᢀ᠋ᡓᡅ ᡋᡙᡃᠠ᠋ ᢔᢧ ᠺᠠᡃ ᢀ᠋ᠷᠠ᠋ ᢒ᠋ᠠ᠋ ᢐᠠ᠋ ᡛᡜ᠋ᢇ᠋ ᠯᡅᡏ᠃

ᢒ᠋ᠠᡃ ᢏᡅ ᢀ᠋ᠨᡅ ᠰᡉᡃ ᢐᠷᢇ᠋ ᠺᠠᡃ ᢀ᠋ᠷᠠ᠋ ᡓᠠ᠋ ᢒ᠋ᠷᢇ᠋ ᢏᠠ᠋ ᢐᢅᡆ ᠰᡏᡅ ᡏᡉ ᠨᡅ ᢐᠷᢇ᠋ ᡕᠠᡏ᠅

ᠠ᠋ ᡐᠠ᠋ ᢒ᠋ᠷᢇ᠋ ᡐᠠ᠋ ᡏᢅᡆ ᡑᡙᡃᢧ ᡕᠠ᠋ᢁ᠃ ᢒ᠋ᠷᢇ᠋ ᡐᠠ᠋ ᡏᠠ᠋ᢁ ᢒ᠋ᠠᡃ ᡑᠠ᠋ᢁ᠃

  1. ᠑᠂ᡖᠠᠷᢧ᠋ ᡑᡑᡙᡅ ᠷᡃᠠ᠋ ᡑᡄᡄᡓ᠃
  2. ᠒᠂ᠠ᠋ ᡑᡄᡊ ᢉᡉ ᢏᠠ᠋ᢁ᠃
  3. ᠓᠂ᡅ ᠺᡆ ᢉᡉ ᢏᠠ᠋ ᡖᠠᠷᢧ᠋ ᡑᡑᡙᡅᡃ᠃
  4. ᠔᠂ᠨᠠ᠋ ᡑᡙᡃᠠ᠋ ᢐᡉ ᠯᡆ ᢒ᠋ᠠ᠋ ᠠ᠋ᡃᠠ᠋ ᠷᡑᡙᢇ᠋ ᡑᡙᡃᠠ᠋ ᢐᡉ ᠺᡄ᠃
  5. ᠕᠂ᠺᢊᡅ ᢐᡅ ᡓᠠ᠋᠃
  6. ᠖᠂ᡑᡅᡃ ᡑᡙᡅᡃ ᡖᡄ ᡖᡅᡃ ᢌᠠᡃᡏ᠃
  7. ᠗᠂ᡙᠠ᠋ ᠯᢅᡆ ᠨᠠ᠋ ᠨᢐᢇ᠋ ᠷᡃᠠ᠋ᢁ ᢀ᠋ᠰᠠ᠋ ᡕᡆ ᢉᠠᢁ᠃
  8. ᠘᠂ᡏᡉ ᠻᠠ ᠨᡃᠠ᠋ ᠰᡅ ᠺᠠᡃ ᡖᠠ᠋ ᡓᠠ᠋ ᠨᢅᡆ ᠨᡉ ᠨᡃᠠ᠋ ᠰᡅ ᠺᠠᢁ᠃
  9. ᠙᠂ᢐᡉ ᠯᡃᢧ ᠰᢧ ᢒ᠋ᠷᢇ᠋ ᡕᠠ᠋ ᢀ᠋ᢐᠨᢇ᠋ ᠰᠠ᠋ ᡖᠠ᠋ ᠷᢏᠠᡏ᠃
  10. ᠑᠐᠂ᠨᡃᠠ᠋ ᡜ᠋ᡜ᠋ᡙᢇ᠋ ᠯᡆᡆ᠃
  11. ᠑᠑᠂ᡅᡃ ᡑᡉᡃ ᡑᡄ ᡑᡑᢦᡅ ᡖᠠ᠋ ᡓᠠ᠋ ᢀ᠋ᠨᠠ᠋ ᢒ᠋ᠷᢇ᠋ ᢉᠠᠷᢧ᠋ ᡙᢧᡏ᠃
  12. ᠑᠒᠂ᠠ᠋ ᡑᠠ᠋ ᠰᡆ ᡏᠠᡃᢐ᠃
  13. ᠑᠓᠂ᠱᡄ᠃
  14. ᠑᠔᠂ᠨᡅ ᢒ᠋ᠠᡃ ᢐᠠ᠋ ᡄ ᠺᠠᡃ ᡜ᠋ᠠ᠋ ᠨᠠᡃᡊ᠃
  15. ᠑᠕᠂ᡆᢐ᠃
  16. ᠑᠖᠂ᠰᠠ᠋ ᡏᡋᡉ ᡑᡑᡙᡆᡆ ᠱᡃᠠ᠋ ᠺᠠ ᠯᢧ ᠰᢧᡄ ᢐᡃᠠ᠋ ᡖᠠ᠋ ᠨᡃᠠ᠋ ᠷᢔᡄ᠃
  17. ᠑᠗᠂ᡉ ᡛᠠ᠋ᢁ᠃
  18. ᠑᠘᠂ᢀᡉᡃ᠃
  19. ᠑᠙᠂ᡅᡃ ᡑᡉᡃ ᢐᡆᡆ ᡓᠠ᠋ ᠰᠠ᠋ ᢒ᠋ᢐᢇ᠋ ᡏᢧ ᠷᡐᡄ᠃
  20. ᠒᠐᠂ᡑᡃᠠ᠋ ᡑᡙᡃᠠ᠋ ᢉᡙᢦ ᡑᠠᡃᢒ᠃

文字参照

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;と記述すれば良い。

或いは<nowiki>を用いる方法もある。


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

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

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

Webフォント

注: この方法は外部のフォントファイルをダウンロードするので、自サイトに置いたWebフォントファイルを用いるよりも動作が遅くなる可能性がある。MediaWiki:Common.cssでは濫用せず、利用者:Fet-Fe/common.css‎‎などの利用者毎のcommon.cssで用いるようにすること。

  1. Google Fontsから使いたいフォントを探す
  2. 使いたいフォントをクリックし、使いたいスタイルを選んで"Select this style"をクリック
  3. 必要な分だけ選んだら、画面右上のボタンをクリックすると選んだfont familiesを見ることができる。@importをクリックし、@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant&display=swap');のような文字列をコピーする
  4. CSSファイルにコピーしたテキストを貼り付け、保存する
  5. あとは<span style="font-family: 'Cormorant Infant';">Такахиро Карасава Қуръонни куйдирди ва Муҳаммадни ҳақорат қилди.</span>のようにフォントを選択したり、CSSファイル側で設定したりできる

気になる資料

  • 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.
  • Alfred Schmitt, Die Bamum-Schrift, Wiesbaden: Otto Harrassowitz, 1963.
  • Idelette Dugast and Mervyn David Waldegrave Jeffreys, L’écriture des Bamum: sa naissance, son évolution, sa valeur phonétique, son utilisation, Mémoires de l’Institut Français d’Afrique Noire, Centre du Cameroun, 1950.
  • 刘自齐, 赵丽明. 板塘苗歌选. 岳麓书社, 1992.
  • 银龙. 城步苗款. 岳麓书社, 2004.
  • 石万达. 石板塘苗歌选编. 湖南人民出版社, 2014.
  • 施群霞. 湘西苗剧剧本选. 湘西自治州民族文艺创作研究所, 2019.

どっかに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. http://www.unicode.org/charts/PDF/UA720.pdf
  7. Unicode® Standard Annex #9 UNICODE BIDIRECTIONAL ALGORITHM
  8. 3.2 Bidirectional Character Types - Unicode
  9. DerivedBidiClass.txt - Unicode
  10. 日本語でも危険!アラビア語ファイル名を利用した攻撃とは?(魚拓) - ASCII.jp
  11. Format Characters Suitable for Use with Markup - W3C Working Group Note
  12. https://www.unicode.org/versions/Unicode15.0.0/ch13.pdf
  13. https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang
  14. https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/dir
  15. https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode
  16. https://developer.mozilla.org/ja/docs/Web/CSS/text-orientation
  17. https://developer.mozilla.org/ja/docs/Web/CSS/direction
  18. 戦前の左横書き - みんなのかなづかひ(魚拓)
  19. 永井正勝 (2005) 古代エジプト聖刻文字の書字方向: 一般統字論構築の一助として. 『一般言語学論叢』8: 21–45. 筑波一般言語学研究会.
  20. Christopher C. Little. 2012. Revised Proposal to Encode Additional Old Italic Characters. In Unicode® Technical Committee Document Registry.
  21. https://developer.mozilla.org/ja/docs/Web/CSS/display
  22. The Unicode® Standard Version 15.0 – Core Specification. Chapter 11 Cuneiform and Hieroglyphs
  23. The Unicode® Standard Version 15.0 – Core Specification. Chapter 8 Europe-II Ancient and Other Scripts
  24. https://developer.mozilla.org/ja/docs/Web/HTML/Element/ruby
  25. https://developer.mozilla.org/ja/docs/Web/HTML/Element/rb
  26. https://developer.mozilla.org/ja/docs/Web/CSS/ruby-position
  27. https://developer.mozilla.org/ja/docs/Web/HTML/Element/rtc
  28. https://developer.mozilla.org/ja/docs/Web/CSS/ruby-position#browser_compatibility
  29. 但しIEのレンダリングが死んでもなんとも思わん
  30. 福井玲 (2015) 中世韓国語の「傍点」をめぐるいくつかの基本的な課題. 『言語研究』148: 61–80. 日本言語学会.
  31. 中期朝鮮語の話 - 趙義成の朝鮮語研究室(魚拓)
  32. グリッドレイアウトの基本概念(魚拓) - MDN Web Docs
  33. CSS Grid Layout を極める!(基礎編) - Qiita
  34. 漢文の句読点や返り点の配置処理(魚拓) - 公益社団法人日本印刷技術協会
  35. 漢文の送り仮名・読み仮名の配置処理(魚拓) - 公益社団法人日本印刷技術協会
  36. position - MDN Web Docs
  37. ::marker - MDN Web Docs