→HTMLとCSSのノウハウ
>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 /> | ||