1,587
回編集
編集の要約なし
編集の要約なし |
|||
| 282行目: | 282行目: | ||
またAL属性やRTL属性の文字で挟んでもRight-to-left markやArabic letter markは不要。 | またAL属性やRTL属性の文字で挟んでもRight-to-left markやArabic letter markは不要。 | ||
ちなみに書字方向を制御する特殊文字を利用した攻撃方法も存在する<ref>{{Archive|1=http://ascii.jp/elem/000/000/633/633035/|2=https://archive. | ちなみに書字方向を制御する特殊文字を利用した攻撃方法も存在する<ref>{{Archive|1=http://ascii.jp/elem/000/000/633/633035/|2=https://web.archive.org/web/20260207131001/http://ascii.jp/elem/000/000/633/633035/|3=日本語でも危険！アラビア語ファイル名を利用した攻撃とは？}} - ASCII.jp</ref>。悪用してはいけない（戒め） | ||
HTMLで同様の動作をさせるには[[#dir属性]]を参照。この方法と組み合わせても良い<ref>[https://www.w3.org/TR/unicode-xml/#Format Format Characters Suitable for Use with Markup] - W3C Working Group Note</ref>。 | HTMLで同様の動作をさせるには[[#dir属性]]を参照。この方法と組み合わせても良い<ref>[https://www.w3.org/TR/unicode-xml/#Format Format Characters Suitable for Use with Markup] - W3C Working Group Note</ref>。 | ||
| 444行目: | 444行目: | ||
=== 右横書き === | === 右横書き === | ||
日本語でかつて用いられていた右横書きはHTMLの<code><bdo dir="rtl"></code><ref>https://developer.mozilla.org/ja/docs/Web/HTML/Element/bdo</ref><ref> | 日本語でかつて用いられていた右横書きはHTMLの<code><bdo dir="rtl"></code><ref>https://developer.mozilla.org/ja/docs/Web/HTML/Element/bdo</ref><ref>[https://www.w3.org/International/questions/qa-ltr-scripts-in-rtl RTL rendering of LTR scripts] - W3C</ref>で実現できる。 | ||
但し下のように多くの環境で約物が逆向きになる。 | 但し下のように多くの環境で約物が逆向きになる。 | ||
: <bdo dir="rtl">「唐澤貴洋殺す。」</bdo> | : <bdo dir="rtl">「唐澤貴洋殺す。」</bdo> | ||
日本語には元々右横書きが存在せず、一行一文字の縦書きであるという説もある<ref>{{Archive|https://osito.jp/minkana/migiyoko.html|https://archive. | 日本語には元々右横書きが存在せず、一行一文字の縦書きであるという説もある<ref>{{Archive|https://osito.jp/minkana/migiyoko.html|https://web.archive.org/web/20260226092400/https://osito.jp/minkana/migiyoko.html|戦前の左横書き}} - みんなのかなづかひ</ref>。 | ||
これをCSSで再現しようとすると<code>writing-mode: vertical-rl; height:1em;</code>となる。 | これをCSSで再現しようとすると<code>writing-mode: vertical-rl; height:1em;</code>となる。 | ||
| 559行目: | 559行目: | ||
また取ることのできる値もW3Cの定めたものとは異なる。ここでは<code>-webkit-ruby-position: after;</code>と記述している。 | また取ることのできる値もW3Cの定めたものとは異なる。ここでは<code>-webkit-ruby-position: after;</code>と記述している。 | ||
このようになるべく多くのブラウザで挙動を同じくする為には、各ブラウザの対応を確認する必要がある<ref>但しIEのレンダリングが死んでもなんとも思わん</ref>。 | このようになるべく多くのブラウザで挙動を同じくする為には、各ブラウザの対応を確認する必要がある<ref group="註釈">但しIEのレンダリングが死んでもなんとも思わん</ref>。 | ||
==== subタグ・supタグ ==== | ==== subタグ・supタグ ==== | ||
訓民正音が制定された直後の李氏朝鮮では、訛った漢語の読みを正そうという意識の下「{{wpl|東国正韻}}」が定められた。 | 訓民正音が制定された直後の李氏朝鮮では、訛った漢語の読みを正そうという意識の下「{{wpl|東国正韻}}」が定められた。 | ||
その漢字音を広める為に漢字の下に小さい訓民正音で読みを書くという試みが一時期なされていた<ref>[https://doi.org/10.11435/gengo.148.0_61 福井玲 (2015) 中世韓国語の「傍点」をめぐるいくつかの基本的な課題. 『言語研究』148: 61–80. 日本言語学会.]</ref>が、当時博く用いられていた音とは異なっていたために受け入れられず、直ぐに廃れた<ref>{{Archive|http://www.tufs.ac.jp/ts/personal/choes/korean/middle/Jmiddle.html|https://archive. | その漢字音を広める為に漢字の下に小さい訓民正音で読みを書くという試みが一時期なされていた<ref>[https://doi.org/10.11435/gengo.148.0_61 福井玲 (2015) 中世韓国語の「傍点」をめぐるいくつかの基本的な課題. 『言語研究』148: 61–80. 日本言語学会.]</ref>が、当時博く用いられていた音とは異なっていたために受け入れられず、直ぐに廃れた<ref>{{Archive|http://www.tufs.ac.jp/ts/personal/choes/korean/middle/Jmiddle.html|https://web.archive.org/web/20260114175645/https://www.tufs.ac.jp/ts/personal/choes/korean/middle/Jmiddle.html|中期朝鮮語の話}} - 趙義成の朝鮮語研究室</ref>。 | ||
これをHTML上で表現するにはsubタグを用いれば良い。以下の例では、訓民正音の部分のみをすべてsubタグで囲んでいる。 | これをHTML上で表現するにはsubタグを用いれば良い。以下の例では、訓民正音の部分のみをすべてsubタグで囲んでいる。 | ||
| 596行目: | 596行目: | ||
CSSグリッドレイアウトを用いれば、様々な要素を2次元に配置することができる。 | CSSグリッドレイアウトを用いれば、様々な要素を2次元に配置することができる。 | ||
<code>display: grid;</code>プロパティや<code>display: inline-grid;</code>プロパティを指定し、<code>grid-template-rows</code>と<code>grid-template-columns</code>でグリッドの区切り方を設定して、<code>grid-row</code>や<code>grid-column</code>で要素の位置を決定する。 | <code>display: grid;</code>プロパティや<code>display: inline-grid;</code>プロパティを指定し、<code>grid-template-rows</code>と<code>grid-template-columns</code>でグリッドの区切り方を設定して、<code>grid-row</code>や<code>grid-column</code>で要素の位置を決定する。 | ||
詳しくは<ref> | 詳しくは<ref>[https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout グリッドレイアウトの基本概念] - MDN Web Docs</ref>や<ref>{{Archive|https://qiita.com/kura07/items/e633b35e33e43240d363|https://web.archive.org/web/20260303054830/https://qiita.com/kura07/items/e633b35e33e43240d363|CSS Grid Layout を極める！（基礎編）}} - Qiita</ref>を参照。 | ||
<ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; align-items: center; vertical-align: middle;"> | <ruby style="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; align-items: center; vertical-align: middle;"> | ||
| 615行目: | 615行目: | ||
このレイアウトやrubyタグ、sub/subタグなどを用いて漢文の返り点や吐などを表記することができる。 | このレイアウトやrubyタグ、sub/subタグなどを用いて漢文の返り点や吐などを表記することができる。 | ||
但し返り点と送り仮名は<ref>{{Archive|https://www.jagat.or.jp/archives/21315|https://archive | 但し返り点と送り仮名は<ref>{{Archive|https://www.jagat.or.jp/archives/21315|https://ghostarchive.org/archive/b6tzE|漢文の句読点や返り点の配置処理}} - 公益社団法人日本印刷技術協会</ref>や<ref>{{Archive|https://www.jagat.or.jp/%3Fp%3D21747|https://ghostarchive.org/archive/6ZgAz|漢文の送り仮名・読み仮名の配置処理}} - 公益社団法人日本印刷技術協会</ref>に従っている。 | ||
<div style="writing-mode: vertical-rl; font-size: 20px;"> | <div style="writing-mode: vertical-rl; font-size: 20px;"> | ||
<span 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="display: inline-grid; grid-template-rows: .5em .5em .5em .5em; grid-template-columns: .5em .5em auto; align-items: center; vertical-align: middle;"> | ||
| 1,035行目: | 1,035行目: | ||
どっかにPDFでも落ちてないナリかねえ | どっかにPDFでも落ちてないナリかねえ | ||
== | == 註釈 == | ||
<references group="註釈"/> | |||
== 出典 == | |||
<references /> | <references /> | ||