→HTMLとCSSのノウハウ
>Fet-Fe (→ルビ) |
>Fet-Fe |
||
| 107行目: | 107行目: | ||
: <span lang="ar" dir=rtl>حرق تاكاهيرو كاراساوا القرآن وأهان محمدًا.</span> | : <span lang="ar" dir=rtl>حرق تاكاهيرو كاراساوا القرآن وأهان محمدًا.</span> | ||
=== 縦書き === | |||
日本語の縦書きは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; 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> | |||
回鶻語やソグド語の縦書きには<code>writing-mode: sideways-lr;</code>を用いる。 | |||
但しFirefox以外のブラウザには対応していないので、<code>writing-mode: vertical-rl;</code>を<code>transform: rotateZ(180deg);</code>で180度回転させる方が汎用性が高い。 | |||
: <span lang="oui" dir="rtl" style="writing-mode: vertical-rl; text-orientation: sideways; transform: rotateZ(180deg);">𐽰𐽳𐽶𐽲𐽳𐽾<br>𐾀𐽶𐾁</span> | |||
=== 右横書き === | |||
日本語でかつて用いられていた右横書きはCSSで<code>direction: rtl; unicode-bidi: bidi-override;</code><ref>https://developer.mozilla.org/ja/docs/Web/CSS/direction</ref>で実現できる。 | |||
: <span style="direction: rtl; unicode-bidi: bidi-override;">「唐澤貴洋殺す。」</span> | |||
日本語には元々右横書きが存在せず、一行一文字の縦書きであるという説もある。 | |||
<ref>{{Archive|https://osito.jp/minkana/migiyoko.html|https://archive.vn/D0JAn|戦前の左横書き - みんなのかなづかひ}}</ref>。 | |||
これをCSSで再現しようとすると<code>writing-mode: vertical-rl; height:1em;</code>となる。 | |||
約物の表示が縦書きのそれとなるので非常に不自然である。 | |||
: <span style="writing-mode: vertical-rl; height:1em;">「唐澤貴洋殺す。」</span> | |||
エジプト語で用いられるヒエログリフは、Unicode上では欧米の言語のスタイルに合わせてltrとなっているものの、古代エジプトの碑文にはrtlのものが圧倒的に多い<ref>[http://www.lingua.tsukuba.ac.jp/ippan/JGL/2005/2005-Nagai.pdf 永井正勝 (2005) 古代エジプト聖刻文字の書字方向: 一般統字論構築の一助として. 『一般言語学論叢』8: 21–45. 筑波一般言語学研究会.]</ref>。 | |||
これを再現する場合、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><ref>https://developer.mozilla.org/ja/docs/Web/CSS/display</ref>を指定しているのはspanタグがインライン要素であるからであり、ブロックレベル要素に適用するならこれは不要。 | |||
次の例はブロックレベル要素であるpタグに<code>transform: rotateY(180deg);</code>のみ適用した例である。 | |||
右の方に寄っていてパッと見つけにくいので注意。 | |||
: <p lang="egy" style="transform: rotateY(180deg);">𓂋𓏺𓈖𓆎𓅓𓏏𓊖</p> | |||
=== ルビ === | === ルビ === | ||
==== rubyタグ ==== | |||
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>。 | ||
| 137行目: | 183行目: | ||
: <ruby lang="vi">唐澤貴洋<rp>(</rp><rt>Đường Trạch Quý Dương</rt><rp>)</rp></ruby> | : <ruby lang="vi">唐澤貴洋<rp>(</rp><rt>Đường Trạch Quý Dương</rt><rp>)</rp></ruby> | ||
[[#縦書き|縦書き]]ではルビも縦書きになる。 | |||
次に示す例では、<code><span lang="min-TW" style="writing-mode: vertical-rl;"><ruby>唐澤貴洋<rp>(</rp><rt>トン𚿳チ̅ェㇰ𚿶クイ𚿱イウ𚿻</rt><rp>)</rp></ruby></span></code>と記述している。 | |||
: <span lang="min-TW" style="writing-mode: vertical-rl;"><ruby>唐澤貴洋<rp>(</rp><rt>トン𚿳チ̅ェㇰ𚿶クイ𚿱イウ𚿻</rt><rp>)</rp></ruby></span> | |||
rubyタグに直接<code>writing-mode: vertical-rl;</code>を指定するとブラウザによってはルビの位置がおかしくなる。 | |||
次の例では<code><ruby style="writing-mode: vertical-rl;">唐澤貴洋<rp>(</rp><rt>𛀜𛃰𛀿𛂞𛁟𛀙𛂭𛄃</rt><rp>)</rp></ruby></code>というように書いている。 | |||
: <ruby style="writing-mode: vertical-rl;">唐澤貴洋<rp>(</rp><rt>𛀜𛃰𛀿𛂞𛁟𛀙𛂭𛄃</rt><rp>)</rp></ruby> | |||
| 145行目: | 202行目: | ||
: <ruby lang="zh-TW" style="ruby-position: inter-character;">唐<rt>ㄊㄤˊ</rt>澤<rt>ㄗㄜˊ</rt>貴<rt>ㄍㄨㄟˋ</rt>洋<rt>ㄧㄤˊ</rt></ruby> | : <ruby lang="zh-TW" style="ruby-position: inter-character;">唐<rt>ㄊㄤˊ</rt>澤<rt>ㄗㄜˊ</rt>貴<rt>ㄍㄨㄟˋ</rt>洋<rt>ㄧㄤˊ</rt></ruby> | ||
どうしても再現したいなら、一つの文字毎にrubyタグで囲み、spanタグに<code>writing-mode: vertical-rl;</code>というCSSを記述して[[#縦書き|縦書き]]にする。 | |||
文字が縦方向にガタつくことを防ぐため、spanタグにはCSSでvertical-align: middle;を指定している。 | |||
下の例では、「唐」の字は<code>< | 下の例では、「唐」の字は<code><span style="writing-mode: vertical-rl; vertical-align: middle;"><ruby>唐<rt>ㄊㄤˊ</rt></ruby></span></code>で記述されている。他の文字も全く同じようにしている。 | ||
先述の通り、rubyタグでCSSを指定せず、それを囲むspanタグを書いてそちらに指定する。 | |||
: <span lang="zh-TW">< | : <span lang="zh-TW"> | ||
<span style="writing-mode: vertical-rl; vertical-align: middle;"><ruby>唐<rt>ㄊㄤˊ</rt></ruby></span> | |||
<span style="writing-mode: vertical-rl; vertical-align: middle;"><ruby>澤<rt>ㄗㄜˊ</rt></ruby></span> | |||
<span style="writing-mode: vertical-rl; vertical-align: middle;"><ruby>貴<rt>ㄍㄨㄟˋ</rt></ruby></span> | |||
<span style="writing-mode: vertical-rl; vertical-align: middle;"><ruby>洋<rt>ㄧㄤˊ</rt></ruby></span> | |||
</span> | |||
ルビを2つ振るには、rubyタグ内でrtcタグ<ref>https://developer.mozilla.org/ja/docs/Web/HTML/Element/rtc</ref>を用いてルビをグループ化する。 | ルビを2つ振るには、rubyタグ内でrtcタグ<ref>https://developer.mozilla.org/ja/docs/Web/HTML/Element/rtc</ref>を用いてルビをグループ化する。 | ||
但しこれも2021年9月7日現在Firefox以外では動作しない。 | 但しこれも2021年9月7日現在Firefox以外では動作しない。 | ||
次の例では<code><ruby>唐澤貴洋<rp>（</rp><rt> | 次の例では<code><ruby>唐澤貴洋<rp>（</rp><rt>たうたくきやう</rt><rp>）</rp><rtc><rp>（</rp><rt>だうぢやくきやう</rt><rp>）</rp></rtc></ruby></code>と記述している。 | ||
: <ruby>唐澤貴洋<rp>（</rp><rt> | : <ruby>唐澤貴洋<rp>（</rp><rt>たうたくきやう</rt><rp>）</rp><rtc><rp>（</rp><rt>だうぢやくきやう</rt><rp>）</rp></rtc></ruby> | ||
rubyタグを入れ子にすれば複数のルビを振ることができる。 | |||
下の例では<code><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></code>と記述している。 | 下の例では<code><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></code>と記述している。 | ||
| 170行目: | 233行目: | ||
このようになるべく多くのブラウザで挙動を同じくする為には、各ブラウザの対応を確認する必要がある<ref>但しIEのレンダリングが死んでもなんとも思わん</ref>。 | このようになるべく多くのブラウザで挙動を同じくする為には、各ブラウザの対応を確認する必要がある<ref>但しIEのレンダリングが死んでもなんとも思わん</ref>。 | ||
==== subタグ・supタグ ==== | |||
訓民正音が制定された直後の李氏朝鮮では、訛った漢語の読みを正そうという意識の下「{{wpl|東国正韻}}」が定められた。 | 訓民正音が制定された直後の李氏朝鮮では、訛った漢語の読みを正そうという意識の下「{{wpl|東国正韻}}」が定められた。 | ||
その漢字音を広める為に漢字の下に小さい訓民正音で読みを書くという試みが一時期なされていた<ref>[http://www.ls-japan.org/modules/documents/LSJpapers/journals/148_fukui.pdf 福井玲 (2015) 中世韓国語の「傍点」をめぐるいくつかの基本的な課題. 『言語研究』148: 61–80. 日本言語学会.]</ref>が、当時博く用いられていた音とは異なっていたために受け入れられず、直ぐに廃れた<ref>{{Archive|http://www.tufs.ac.jp/ts/personal/choes/korean/middle/Jmiddle.html|https://archive.ph/vMk10|中期朝鮮語の話 - 趙義成の朝鮮語研究室}}</ref>。 | その漢字音を広める為に漢字の下に小さい訓民正音で読みを書くという試みが一時期なされていた<ref>[http://www.ls-japan.org/modules/documents/LSJpapers/journals/148_fukui.pdf 福井玲 (2015) 中世韓国語の「傍点」をめぐるいくつかの基本的な課題. 『言語研究』148: 61–80. 日本言語学会.]</ref>が、当時博く用いられていた音とは異なっていたために受け入れられず、直ぐに廃れた<ref>{{Archive|http://www.tufs.ac.jp/ts/personal/choes/korean/middle/Jmiddle.html|https://archive.ph/vMk10|中期朝鮮語の話 - 趙義成の朝鮮語研究室}}</ref>。 | ||
| 203行目: | 266行目: | ||
ᄆᆞᄎᆞᆷ〮내〯제ᄠᅳ〮들〮시러〮펴디〮몯〯ᄒᆞᇙ노〮미〮하니〮라〮 | ᄆᆞᄎᆞᆷ〮내〯제ᄠᅳ〮들〮시러〮펴디〮몯〯ᄒᆞᇙ노〮미〮하니〮라〮 | ||
</span> | </span> | ||
== 脚註 == | == 脚註 == | ||
<references /> | <references /> | ||