「利用者:Fet-Fe」の版間の差分
>Fet-Fe 細編集の要約なし |
>Fet-Fe |
||
| 51行目: | 51行目: | ||
== HTMLとCSSのノウハウ == | == HTMLとCSSのノウハウ == | ||
以下で用いているCSSはHTMLのstyle属性の部分に記述している。 | |||
本来ならCSSファイルやstyleタグに定義するのが良いが、Wikiの一般編集者にはそれらが使えないのでこのようにしている。 | |||
また以下のことを適用するには、適用したい部分をspanタグで囲んでそのタグ内に属性を記述すれば良いが、その部分が既に他のタグ(divタグなど)で囲まれているなら、態々spanタグを増やさずに既に書かれているタグに新たに属性を適用する方が適当である。 | |||
=== lang属性 === | === lang属性 === | ||
| 56行目: | 61行目: | ||
例えば中国語で“唐泽贵洋。”と表示すると、Wikiのhtmlのlang設定が全体として"ja"(日本語)になっているため、簡体字だけ変なフォントで表示されることがよくある。 | 例えば中国語で“唐泽贵洋。”と表示すると、Wikiのhtmlのlang設定が全体として"ja"(日本語)になっているため、簡体字だけ変なフォントで表示されることがよくある。 | ||
そのような時に<code>lang="zh"</code>を設定すれば<span lang="zh">“唐泽贵洋。”</span>と表示される。 | |||
ウルドゥー語の<code>lang="ur"</code>を指定すれば、環境によっては自動でナスタアリーク体のフォントを使用してくれる。 | |||
: <span lang="ur" dir="rtl">اردو</span> | : <span lang="ur" dir="rtl">اردو</span> | ||
| 70行目: | 75行目: | ||
地域の指定もできる。ISO 3166などを用いる。 | 地域の指定もできる。ISO 3166などを用いる。 | ||
例えば台湾の中国語を指定したい場合、ISO 3166- | 例えば台湾の中国語を指定したい場合、ISO 3166-1で示されているTWを用いて<code>lang="zh-TW"</code>とする。 | ||
: <span lang="zh-TW">“唐澤貴洋。”</span> | : <span lang="zh-TW">“唐澤貴洋。”</span> | ||
| 76行目: | 81行目: | ||
更には文字種の指定も可能。 | 更には文字種の指定も可能。 | ||
ペルシャ語の<span lang="fa" dir="rtl">«تاکاهیرو کاراساوا قرآن را سوخت و به محمد توهین کرد.»</span>をナスタアリーク体で表記したい場合、ISO | ペルシャ語の<span lang="fa" dir="rtl">«تاکاهیرو کاراساوا قرآن را سوخت و به محمد توهین کرد.»</span>をナスタアリーク体で表記したい場合、ISO 15924で定義されたアラビア文字ナスタアリーク体の符号Aranを用いて<code>lang="fa-Aran"</code>とする。 | ||
但しこれは当職の確認した限りではSafariでしか効かなかった。 | |||
: <span lang="fa-Aran" dir="rtl">تاکاهیرو کاراساوا قرآن را سوخت و به محمد توهین کرد.</span> | : <span lang="fa-Aran" dir="rtl">تاکاهیرو کاراساوا قرآن را سوخت و به محمد توهین کرد.</span> | ||
| 82行目: | 88行目: | ||
シリア文字も環境が整っていればlang属性だけでフォントを切り替えられる。 | シリア文字も環境が整っていればlang属性だけでフォントを切り替えられる。 | ||
: lang="syc-Syre" → <span lang="syc-Syre" dir="rtl">ܐܶܩܛܘ̇ܠ ܠܶܗ ܠܛܰܐܩܰܐܗܺܝܪܘ̇ ܩܰܐܪܰܐܣܰܐܘܰܐ܂</span> | : <span style="display: inline-block; width: 9em;">エストランゲロ体:</span><code>lang="syc-Syre"</code> → <span lang="syc-Syre" dir="rtl">ܐܶܩܛܘ̇ܠ ܠܶܗ ܠܛܰܐܩܰܐܗܺܝܪܘ̇ ܩܰܐܪܰܐܣܰܐܘܰܐ܂</span> | ||
: lang="syc-Syrj" → <span lang="syc-Syrj" dir="rtl">ܐܶܩܛܘ̇ܠ ܠܶܗ ܠܛܰܐܩܰܐܗܺܝܪܘ̇ ܩܰܐܪܰܐܣܰܐܘܰܐ܂</span> | : <span style="display: inline-block; width: 9em;">セルトー体:</span><code>lang="syc-Syrj"</code> → <span lang="syc-Syrj" dir="rtl">ܐܶܩܛܘ̇ܠ ܠܶܗ ܠܛܰܐܩܰܐܗܺܝܪܘ̇ ܩܰܐܪܰܐܣܰܐܘܰܐ܂</span> | ||
: lang="syc-Syrn" → <span lang="syc-Syrn" dir="rtl">ܐܶܩܛܘ̇ܠ ܠܶܗ ܠܛܰܐܩܰܐܗܺܝܪܘ̇ ܩܰܐܪܰܐܣܰܐܘܰܐ܂</span> | : <span style="display: inline-block; width: 9em;">ネストリウス体:</span><code>lang="syc-Syrn"</code> → <span lang="syc-Syrn" dir="rtl">ܐܶܩܛܘ̇ܠ ܠܶܗ ܠܛܰܐܩܰܐܗܺܝܪܘ̇ ܩܰܐܪܰܐܣܰܐܘܰܐ܂</span> | ||
しかしこれも環境によって動作が異なるのであまり当てにはせず、自分でフォントを指定した方が安定する。 | |||
=== dir属性 === | === dir属性 === | ||
| 96行目: | 102行目: | ||
: <span lang="ar">حرق تاكاهيرو كاراساوا القرآن وأهان محمدًا.</span> | : <span lang="ar">حرق تاكاهيرو كاراساوا القرآن وأهان محمدًا.</span> | ||
dir="rtl"を設定すれば正しい表示がなされる。 | <code>dir="rtl"</code>を設定すれば正しい表示がなされる。 | ||
: <span lang="ar" dir=rtl>حرق تاكاهيرو كاراساوا القرآن وأهان محمدًا.</span> | : <span lang="ar" dir=rtl>حرق تاكاهيرو كاراساوا القرآن وأهان محمدًا.</span> | ||
| 103行目: | 109行目: | ||
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>。 | ||
<ruby>唐澤貴洋<rt>からさわたかひろ</rt></ruby>と記述することで下のような出力がなされる。 | <code><ruby>唐澤貴洋<rt>からさわたかひろ</rt></ruby></code>と記述することで下のような出力がなされる。 | ||
: <ruby>唐澤貴洋<rt>からさわたかひろ</rt></ruby> | : <ruby>唐澤貴洋<rt>からさわたかひろ</rt></ruby> | ||
| 109行目: | 115行目: | ||
更にrpタグを用いることで、rubyタグへの対応が無いブラウザでの表示をコントロールできる(でも今時そんなことをする必要はなさそう)。 | 更にrpタグを用いることで、rubyタグへの対応が無いブラウザでの表示をコントロールできる(でも今時そんなことをする必要はなさそう)。 | ||
例えば<ruby lang="ko">唐澤貴洋<rp>(</rp><rt>당택귀양</rt><rp>)</rp></ruby>の結果は下のようになる。 | 例えば<code><ruby lang="ko">唐澤貴洋<rp>(</rp><rt>당택귀양</rt><rp>)</rp></ruby></code>の結果は下のようになる。 | ||
: <ruby lang="ko">唐澤貴洋<rp>(</rp><rt>당택귀양</rt><rp>)</rp></ruby> | : <ruby lang="ko">唐澤貴洋<rp>(</rp><rt>당택귀양</rt><rp>)</rp></ruby> | ||
| 118行目: | 124行目: | ||
=== 縦書き === | === 縦書き === | ||
日本語の縦書きは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;">2021年に唐澤貴洋knifeで<br>メッタ刺しにして殺す。</span> | ||
<span style="writing-mode: vertical-rl; text-orientation: upright;">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> | : <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="sog" dir="rtl" style="writing-mode: vertical-rl; text-orientation: sideways; transform: rotateZ(180deg);">𐽂𐼰𐼸𐼰𐼳𐼷𐽀𐼷 𐼸𐼰𐽀𐼰𐼼𐼰𐼴𐼷<br>𐼾𐽂𐼶𐼴𐼰𐼷𐼺𐼸𐼰𐼻𐽘</span> | |||
=== 右横書き === | |||
日本語でかつて用いられていた右横書きはCSSで<code>direction: rtl; unicode-bidi: bidi-override;</code>で実現できる。 | |||
: <span style="direction: rtl; unicode-bidi: bidi-override;">「唐澤貴洋殺す。」</span> | |||
日本語には元々右横書きが存在せず、一行一文字の縦書きであるという説もある。 | |||
{{Archive|https://osito.jp/minkana/migiyoko.html|https://archive.vn/D0JAn|こちらのブログ}}にて詳しく議論されている。 | |||
これをCSSで再現しようとすると<code>writing-mode: vertical-rl; height:1em;</code>となる。 | |||
約物の表示が縦書きのそれとなるので非常に不自然である。 | |||
: <span style="writing-mode: vertical-rl; height:1em;">「唐澤貴洋殺す。」</span> | |||
エジプト語で用いられるヒエログリフは、Unicode上では欧米の言語のスタイルに合わせてltrとなっているものの、古代エジプトの碑文にはrtlのものが圧倒的に多い。 | |||
これを再現する場合、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>を指定しているのはspanタグがインライン要素であるからであり、ブロックレベル要素に適用するならこれは不要。 | |||
次の例はブロックレベル要素であるpタグに<code>transform: rotateY(180deg);</code>のみ適用した例である。 | |||
右の方に寄っていてパッと見つけにくいので注意。 | |||
: < | : <p lang="egy" style="transform: rotateY(180deg);">𓂋𓏺𓈖𓆎𓅓𓏏𓊖</p> | ||
== 脚註 == | == 脚註 == | ||
<references /> | <references /> | ||
2021年8月28日 (土) 21:32時点における版
Unicodeのノウハウ
結合文字
Unicodeの中には前の文字とくっ付いてあたかも合わせて一文字のように振る舞う結合文字がある。 デーヴァナーガリーやヘブライ文字の母音字などが良い例である。(क + ा → का、א + ָ ← אָ)
日本語では濁点や半濁点の結合文字が存在する。通常の濁点と半濁点はそれぞれ゛(U+309B)と゜(U+309C)であるが、結合文字は ゙(U+3099)と ゚(U+309A)である。 「が」などの濁音には専用の文字コードが存在するので、通常これらを用いることはない。 しかし結合文字を用いることでUnicodeに登録されていない文字を表現することができる。例えば「ン゙」「墓゚」など。結合文字でない「墓゜」よりも見栄えが良い。
漢字構成記述文字
Unicodeに登録されていない漢字を登録されている字の組み合わせで表現するための文字。「⿰馬K」など。 システム側で上手く合成するように要求するわけではないので見栄えは悪いが、⿱や⿵、再帰的な記述を用いて複雑な字形も表せる。
異体字セレクタ
UnicodeのCJK Unified Ideographsに載っていない書体の漢字でも、U+E0100〜U+E01EFの異体字セレクタ(IVS; Ideographic Variation Sequence)[1]を用いて表現することができる。
例えば「唐」という漢字には縦棒が下に突き出ている異体字が存在する。これを表現するには「唐」の後ろにU+E0101を付ければ良い(唐󠄁)。見えない場合はおま環。
異体字セレクタセレクタで実験したり、GlyphWikiから検索したりすることで書体を見つけることができる。
アポストロフィ
キーボードから入力しやすいのは'(APOSTROPHE、U+0027)であるが、アポストロフィとしては他の文字が推奨されている[2]。
英語やフランス語のアポストロフィとして推奨されるのは’(RIGHT SINGLE QUOTATION MARK、U+2019)である[3]。これは‘’という引用符の右側のものと同じである。なので‘I’ll kill Takahiro Karasawa.’のように同じ文字で2つの役割となる。
一方でタヒチ語などでの声門閉鎖音の正書法やIPAの放出音、ウクライナ語での軟音化などを表す文字はʼ(MODIFIER LETTER APOSTROPHE、U+02BC)である[4]。
記号としてのアポストロフィがU+2019、文字としてのアポストロフィがU+02BCであると捉えることもできる。
他にウズベク語やハワイ語で用いられるʻ(MODIFIER LETTER REVERSED COMMA、U+02BD)も存在する。
''や""は引用符として用いることも推奨されておらず、‘’や“”が推奨される。ソフトウェアによっては自動で置換される。
スペースとゼロ幅文字
通常のスペース(U+0020)以外にノーブレークスペース(U+00A0、HTMLでは )が存在する。 このスペースが存在する部分では自動改行が行われない。
それとは別に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属性
言語を定義する[5]。
例えば中国語で“唐泽贵洋。”と表示すると、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属性
書字方向を示す[6]。
このwikiは日本語に対応しているので基本的に書字方向はltrとなっている。 そのため普通にアラビア文字などrtl属性の文字を書くと、ピリオドがラテン文字のものと共通しているためにそれだけ右側に行ってしまう。
- حرق تاكاهيرو كاراساوا القرآن وأهان محمدًا.
dir="rtl"を設定すれば正しい表示がなされる。
- حرق تاكاهيرو كاراساوا القرآن وأهان محمدًا.
ルビ
HTMLのrubyタグで振り仮名を振ることができる[7]。
<ruby>唐澤貴洋<rt>からさわたかひろ</rt></ruby>と記述することで下のような出力がなされる。
- 唐澤貴洋
更にrpタグを用いることで、rubyタグへの対応が無いブラウザでの表示をコントロールできる(でも今時そんなことをする必要はなさそう)。
例えば<ruby lang="ko">唐澤貴洋<rp>(</rp><rt>당택귀양</rt><rp>)</rp></ruby>の結果は下のようになる。
- 唐澤貴洋
但しrubyタグに対応していなければ下のようになる。
- 唐澤貴洋(당택귀양)
縦書き
日本語の縦書きは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;で実現できる。
- 「唐澤貴洋殺す。」
日本語には元々右横書きが存在せず、一行一文字の縦書きであるという説もある。 こちらのブログ(魚拓)にて詳しく議論されている。
これをCSSで再現しようとするとwriting-mode: vertical-rl; height:1em;となる。
約物の表示が縦書きのそれとなるので非常に不自然である。
- 「唐澤貴洋殺す。」
エジプト語で用いられるヒエログリフは、Unicode上では欧米の言語のスタイルに合わせてltrとなっているものの、古代エジプトの碑文にはrtlのものが圧倒的に多い。
これを再現する場合、CSSでtransform: rotateY(180deg); display: inline-block;を指定すれば良い。
- 𓂋𓏺𓈖𓆎𓅓𓏏𓊖
display: inline-block;を指定しているのはspanタグがインライン要素であるからであり、ブロックレベル要素に適用するならこれは不要。
次の例はブロックレベル要素であるpタグにtransform: rotateY(180deg);のみ適用した例である。
右の方に寄っていてパッと見つけにくいので注意。
𓂋𓏺𓈖𓆎𓅓𓏏𓊖
脚註
- ↑ https://www.unicode.org/charts/PDF/UE0100.pdf
- ↑ http://www.unicode.org/charts/PDF/U0000.pdf
- ↑ https://www.unicode.org/charts/PDF/U2000.pdf
- ↑ https://www.unicode.org/charts/PDF/U02B0.pdf
- ↑ https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang
- ↑ https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/dir
- ↑ https://developer.mozilla.org/ja/docs/Web/HTML/Element/ruby
- ↑ https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode
- ↑ https://developer.mozilla.org/ja/docs/Web/CSS/text-orientation