→HTMLとCSSのノウハウ
>Fet-Fe (→ヴィラーマ) |
>Fet-Fe |
||
| 313行目: | 313行目: | ||
例えば中国語で“唐泽贵洋。”と表示すると、Wikiのhtmlのlang設定が全体として"ja"(日本語)になっているため、簡体字だけ変なフォントで表示されることがよくある。 | 例えば中国語で“唐泽贵洋。”と表示すると、Wikiのhtmlのlang設定が全体として"ja"(日本語)になっているため、簡体字だけ変なフォントで表示されることがよくある。 | ||
そのような時に<code>lang="zh"</code> | そのような時に<code>lang="zh"</code>を設定して<code><span lang="zh">“唐泽贵洋。”</span></code>とすれば<span lang="zh">“唐泽贵洋。”</span>と表示される。 | ||
ウルドゥー語の<code>lang="ur"</code> | ウルドゥー語の<code>lang="ur"</code>を指定して<code><span lang="ur" dir="rtl">اُردُو</span></code>とすれば、環境によっては自動でナスタアリーク体のフォントを使用してくれる。 | ||
: <span lang="ur" dir="rtl">اُردُو</span> | : <span lang="ur" dir="rtl">اُردُو</span> | ||
| 354行目: | 354行目: | ||
: <span lang="ar">حَرَقَ تَاكَاهِيرُو كَارَاسَاوَا ٱلْقُرْآنَ وَأَهَانَ مُحَمَّدًا.</span> | : <span lang="ar">حَرَقَ تَاكَاهِيرُو كَارَاسَاوَا ٱلْقُرْآنَ وَأَهَانَ مُحَمَّدًا.</span> | ||
<code>dir="rtl"</code> | <code>dir="rtl"</code>を設定して<code><span lang="ar" dir=rtl>حَرَقَ تَاكَاهِيرُو كَارَاسَاوَا ٱلْقُرْآنَ وَأَهَانَ مُحَمَّدًا.</span></code>とすれば正しい表示がなされる。 | ||
: <span lang="ar" dir=rtl>حَرَقَ تَاكَاهِيرُو كَارَاسَاوَا ٱلْقُرْآنَ وَأَهَانَ مُحَمَّدًا.</span> | : <span lang="ar" dir=rtl>حَرَقَ تَاكَاهِيرُو كَارَاسَاوَا ٱلْقُرْآنَ وَأَهَانَ مُحَمَّدًا.</span> | ||
| 363行目: | 363行目: | ||
日本語の縦書きはCSSで<code>writing-mode: vertical-rl;</code><ref>https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode</ref>を指定すれば良い。 | 日本語の縦書きは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>を指定する。 | 英数字を縦にするには<code>text-orientation: upright;</code><ref>https://developer.mozilla.org/ja/docs/Web/CSS/text-orientation</ref>を指定する。 | ||
左: <code><nowiki><span style="writing-mode: vertical-rl;">2021年に唐澤貴洋knifeで<br>メッタ刺しにして殺す。</span></nowiki></code> | |||
右: <code><nowiki><span style="writing-mode: vertical-rl; text-orientation: upright;">2021年に唐澤貴洋knifeで<br>メッタ刺しにして殺す。</span></nowiki></code> | |||
<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>も指定する。 | 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> | ||
パスパ文字の場合も同様。 | |||
: <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度回転させる方が汎用性が高い。 | 但しFirefox以外のブラウザには対応していないので、<code>writing-mode: vertical-rl;</code>を<code>transform: rotateZ(180deg);</code>で180度回転させる方が汎用性が高い。 | ||