マヨケーがポアされたため、現在はロシケーがメインとなっています。

「利用者:Fet-Fe」の版間の差分

ナビゲーションに移動 検索に移動

利用者:Fet-Fe (ソースを閲覧)

2022年4月7日 (木) 14:11時点における版

40,868 バイト追加 、 2022年4月7日 (木)
細
2405:8100:8000:5CA1:0:0:62:3EEE (トーク) による編集を Fet-Fe による直前の版へ差し戻しました
編集の要約なし
>Fet-Fe
細 (2405:8100:8000:5CA1:0:0:62:3EEE (トーク) による編集を Fet-Fe による直前の版へ差し戻しました)
1行目: 1行目:
<div dir="rtl" lang="ar" style="text-align: center; font-size: x-large;">حرق تــــــاكاهيرو كاراساوا القرآن وأهان محمدًا ﷺ


يختبئ في شركة Steadiness للمحاماة،
ميتا-تسوناماتشي Duplex R’s 301،
2&lrm;-2&lrm;-15 ميتا، ميناتو-كو، طوكيو، 106&lrm;-0032 اليابان
فاقتلوه حيث وجدتموه</div>
当職は本Wikiの副管理者です
連絡は[[利用者・トーク:Fet-Fe|トークページ]]までお願いします
== 恒心教徒の皆様へ：当Wikiのソースの魚拓取得をお手伝い下さい ==
現在Ost師がいらっしゃらない期間が長く続いており、何かあったのではないかと当職は心配しています
Wikiのダンプを取れるのはOst師とごる師だけなので、もしお二人に何かあればWikiのデータが消失してしまうことも考えられます
そこで、wikiに何かあっても最新のコンテンツだけは保存できるよう、当職はWikiの各ページの「ソースを編集」で開く編集ページの魚拓を取るスクリプトを書きました
使い方は必要なライブラリをインストールし、走らせるだけです
アクセス先は当wikiとarchive.phだけなので、生IPでも多分大丈夫です
魚拓が無いかあっても古い場合には新しい魚拓をとります
87行目以降の<code>namespace_list</code>を絞れば、その名前空間のページだけ魚拓をとることができます
多くの教徒が別々の名前空間に対して魚拓をとっていただければ、取得が早く終わります
また1つのIPから多くの魚拓を取得すると制限がかかるかもしれないので、なるべく多様なIPから魚拓をとっていただけると助かります
魚拓ページに対して、JavaScriptなら<code>document.querySelector('#wpTextbox1').textContent</code>を実行すればwikiのソースが取れます
皆様ご協力をお願いいたします
‎<syntaxhighlight lang="python" line>
import subprocess
from urllib.parse import quote, unquote
from bs4 import BeautifulSoup # 要インストール
import re
from time import sleep
from datetime import datetime
from typing import List
ROOT = "https://krsw-wiki.org"
ARCHIVE = "https://archive.ph"
yobi = re.compile(r'\([日月火水木金土]\)')
archive_wip_url_re = re.compile(r'document\.location\.replace\(\"(https:\/\/archive\.ph\/wip\/\S+)\"\)')
# curlコマンドでリクエストを送る
def curl(arg: str) -> str:
  sleep(1) # DoS予防
  return subprocess.run('curl -sSL ' + arg, stdout=subprocess.PIPE, shell=True).stdout.decode('utf-8')
# ページのBeautifulSoupオブジェクトを取得
def fetch_page(url: str) -> BeautifulSoup:
  url = url.replace('&', '\&')
  response = curl(f"-A 'Mozilla/5.0 (Windows NT 10.0; rv:78.0) Gecko/20100101 Firefox/78.0' {url}")
  soup = BeautifulSoup(response, features='lxml')
  return soup
# ページが最後に編集された時間を取得
def last_edit(page_href: str) -> datetime:
  info_page_url = f"{ROOT}/index.php?title={page_href[6:]}&action=info"
  page_obj = fetch_page(info_page_url)
  time_text = page_obj.select_one('#mw-pageinfo-lasttime > td > a').get_text(strip=True)
  # 2022年3月3日 (木) 15:40 みたいな形式からdatetimeに
  time_text = yobi.sub('', time_text)
  timestamp = datetime.strptime(time_text, '%Y年%m月%d日  %H:%M')
  return timestamp
# ページのソースが最後に魚拓された時間を取得
def last_archive(page_href: str) -> datetime:
  source_page_url = f"{ROOT}/index.php?title={page_href[6:]}&action=edit"
  archive_page_url = f"{ARCHIVE}/{source_page_url}"
  page_obj = fetch_page(archive_page_url)
  time_text_node = page_obj.select_one('#row0 > .THUMBS-BLOCK > div:last-of-type > a > div')
  # 魚拓が無ければ最小のタイムスタンプ
  if not time_text_node:
    return datetime.min
  time_text = time_text_node.get_text(strip=True)
  # 16 Jan 2022 00:37 みたいな形式からdatetimeに
  timestamp = datetime.strptime(time_text, '%d %b %Y %H:%M')
  return timestamp
def fetch_submitid() -> str:
  soup = fetch_page(ARCHIVE)
  return soup.select_one('#submiturl > input').get('value')
# 1つのページの魚拓をとる
def archive_page(page_href: str):
  source_page_url = f"{ROOT}/index.php?title={page_href[6:]}&action=edit"
  print(f"{unquote(source_page_url)} の魚拓を取るナリ")
  response = curl(f"-X POST -A 'Mozilla/5.0 (Windows NT 10.0; rv:78.0) Gecko/20100101 Firefox/78.0' -H 'Host:archive.ph' {ARCHIVE}/submit/ --data-raw 'anyway=1&submitid={quote(fetch_submitid())}&url={quote(source_page_url)}'")
  print(f"{archive_wip_url_re.search(response)[1]} で魚拓を取っているナリ\n")
# ページ一覧の各ページで最新の魚拓をとる
def archive_each_page(page_list_url: str):
  page_obj = fetch_page(page_list_url)
  page_list = page_obj.select('.mw-allpages-chunk > li > a')
  for page_url in page_list:
    # 各ページの最終更新日時とそれらのソースの最終魚拓日時を比較
    last_edit_time = last_edit(page_url.get('href'))
    last_archive_time = last_archive(page_url.get('href'))
    if last_archive_time <= last_edit_time:
      # 魚拓が古ければ新しくアーカイブ
      archive_page(page_url.get('href'))
  # ページ一覧のpagination
  pagination_url = page_obj.select_one('.mw-allpages-nav > a:last-of-type')
  if pagination_url and '次のページ' in pagination_url.get_text(strip=True):
    archive_each_page(f"{ROOT}{pagination_url.get('href')}")
def main(namespace_list: List[int]):
  for i in namespace_list:
    # 名前空間のページ一覧のURL
    page_list_url = f"{ROOT}/wiki/{quote('特別:ページ一覧')}?from=&to=&namespace={i}"
    print(f"  {unquote(page_list_url)} の名前空間を探索するナリ\n")
    archive_each_page(page_list_url)
if __name__ == '__main__':
  namespace_list = [
    0,  # (標準)
    4,  # Wiki
    3004, # 恒辞苑
    3006, # 恒心文庫
    8,  # MediaWiki
    10, # テンプレート
    14, # カテゴリ
    828, # モジュール
    3008, # 恒心AA保管庫
    12, # ヘルプ
    6,  # ファイル
    2,  # 利用者
    3000, # Forum
    3002, # Books
    1,  # トーク
    5,  # Wiki・トーク
    3005, # 恒辞苑・トーク
    3007, # 恒心文庫
    9,  # MediaWiki・トーク
    11, # テンプレート・トーク
    15, # カテゴリ・トーク
    829, # モジュール・トーク
    3009, # 恒心AA保管庫・トーク
    13, # ヘルプ・トーク
    7,  # ファイル・トーク
    3,  # 利用者・トーク
    3001, # Forum talk
    3003, # Books talk
  ]
  main(namespace_list)
‎</syntaxhighlight>
== Unicodeのノウハウ ==
=== 結合文字 ===
Unicodeの中には前の文字とくっ付いてあたかも合わせて一文字のように振る舞う結合文字がある。
デーヴァナーガリーやヘブライ文字の母音字などが良い例である。(क + ा → का、<span dir="rtl">א +  ָ ← א‌ָ</span>)
日本語では濁点や半濁点の結合文字が存在する。通常の濁点と半濁点はそれぞれ゛(U+309B)と゜(U+309C)であるが、結合文字は ゙(U+3099)と ゚(U+309A)である。
「が」などの濁音には専用の文字コードが存在するので、通常これらを用いることはない。
しかし結合文字を用いることでUnicodeに登録されていない文字を表現することができる。例えば「ン゙」「[[東光院|墓゚]]」など。結合文字でない「墓゜」よりも見栄えが良い。
=== 漢字構成記述文字 ===
Unicodeに登録されていない漢字を登録されている字の組み合わせで表現するための文字<ref>https://www.unicode.org/charts/PDF/U2FF0.pdf</ref>。「[[馬K|⿰馬K]]」など。
システム側で上手く合成するように要求するわけではないので見栄えは悪いが、⿱や⿵、再帰的な記述を用いて複雑な字形も表せる。
=== 異体字セレクタ ===
UnicodeのCJK Unified Ideographsに載っていない書体の漢字でも、U+E0100〜U+E01EFの異体字セレクタ(IVS; Ideographic Variation Sequence)<ref>https://www.unicode.org/charts/PDF/UE0100.pdf</ref>を用いて表現することができる。
例えば「唐」という漢字には縦棒が下に突き出ている異体字が存在する。これを表現するには「唐」の後ろにU+E0101を付ければ良い(唐󠄁)。見えない場合はおま環。
[https://747.github.io/vsselector/ 異体字セレクタセレクタ]で実験したり、[https://glyphwiki.org/wiki/u5510-ue0101 GlyphWiki]や[https://wakufactory.jp/densho/font/ivs.html IVS異体字メーカー]から検索したりすることで書体を見つけることができる。
=== アポストロフィ ===
キーボードから入力しやすいのは'(APOSTROPHE、U+0027)であるが、アポストロフィとしては他の文字が推奨されている<ref>http://www.unicode.org/charts/PDF/U0000.pdf</ref>。
英語やフランス語のアポストロフィとして推奨されるのは’(RIGHT SINGLE QUOTATION MARK、U+2019)である<ref>https://www.unicode.org/charts/PDF/U2000.pdf</ref>。これは‘’(U+2018, U+2019)という引用符の右側のものと同じである。なので‘I’ll kill Takahiro Karasawa.’のように同じ文字で2つの役割となる。
一方でタヒチ語などでの声門閉鎖音の正書法やIPAの放出音、ウクライナ語での軟音化などを表す文字はʼ(MODIFIER LETTER APOSTROPHE、U+02BC)である<ref>https://www.unicode.org/charts/PDF/U02B0.pdf</ref>。
記号としてのアポストロフィがU+2019、文字としてのアポストロフィがU+02BCであると捉えることもできる。
&#39;&#39;や""は引用符として用いることも推奨されておらず、‘’や“”(U+201C, U+201D)が推奨される。ソフトウェアによっては自動で置換される。
他にウズベク語やハワイ語で用いられるʻ(MODIFIER LETTER TURNED COMMA、U+02BB)、אやء‎などのラテン文字転写に用いるʾ(MODIFIER LETTER RIGHT HALF RING、U+02BE)、עやعの転写に用いられるʿ(MODIFIER LETTER LEFT HALF RING、U+02BF)なども存在する。
またネネツ語やガナサン語ではˮ(MODIFIER LETTER DOUBLE APOSTROPHE、U+02EE)が"(U+0022)や”(U+201D)の代わりに用いられる。
=== スペースとゼロ幅文字 ===
通常のスペース(U+0020)以外にノーブレークスペース(U+00A0、HTMLでは<code>&amp;nbsp;</code>)が存在する。
このスペースが存在する部分では自動改行が行われない。
それとは別にnarrow no-break space(U+202F)も存在する。
ノーブレークスペースと似たような特徴があるが、こちらは幅が狭く、モンゴル文字の接尾辞やパスパ文字の単語内スペースに用いられる。
単語結合子(U+2060)はゼロ幅であり見た目には全く影響を及ぼさないが、その部分での改行を防ぐ。
逆にゼロ幅スペース(U+200B)は単語の切れ目を示し、改行可能な位置を明示する。
ゼロ幅非接合子(U+200C)は本来結合する文字を分離して表現するために用いられる。
ペルシャ語の<span lang="fa">می‌کشم</span>(私は殺す)はこれ無しでは<span lang="fa">میکشم</span>という表示になり、接頭辞<span lang="fa">می</span>が分離しない。
ウイグル語などテュルク語族やクルド語などで用いられるアラビア文字のうち、母音を表すهは後ろに文字が来てもアラビア語の語中形のようにならず、<span lang="ug" dir="rtl">مەن</span>のように語末形のままとなる。これは通常のアラビア文字のه(U+0647)とゼロ幅非接合子を組み合わせても表現できないことはないが、普通はە‎(U+06D5)を使う。
デーヴァナーガリーの場合はヴィラーマでの合字化を防ぐ。<span lang="sa">संरक्षक</span>([[サンラクシャカ]])を<span lang="sa">संरक्‌षक</span>という表示に変える。
ゼロ幅接合子(U+200D)もゼロ幅の文字であるが、こちらは接合することのできる文字を接合形に変形する。
デーヴァナーガリーの子音字にヴィラーマを付けたものは後続の子音字と結合するが、ゼロ幅接合子を置けば後続子音字が無くても接合形をとる。
ञ + ् + U+200D → ञ् + U+200D → ञ्‍
アラビア文字でも同様になる。
アラビア語の一文字の前置詞は後続の単語と結合するが、後続の単語がアラビア文字でなかったとき、独立形で書かれる場合と頭字形で書かれる場合とがある。
後者の場合、{{Archive|https://arabicstocktraders.com/toshiba/|https://archive.vn/cQBD8|このサイト}}に見られるように<span lang="ar" dir="rtl">«بـToshiba»</span>と表せる。
この例ではカシーダ(ARABIC TATWEEL、U+0640)を用いてبを頭字形にしているが、カシーダの分長くなってしまうので<span lang="ar" dir="rtl">«ب&#x200D;&#x061C;Toshiba»</span>のようにゼロ幅接合子を用いるのが良い。
なおソーステキスト上では<code>ب&amp;#x200D;&amp;#x061C;Toshiba</code>のように[[#双方向テキスト|Arabic letter mark]]と組み合わせている。
=== 双方向テキスト ===
このwikiは日本語に対応しているので基本的に書字方向はltrとなっている。
そのため普通にアラビア文字などrtl属性の文字を書くと、ピリオドがラテン文字のものと共通しているためにそれだけ右側に行ってしまう。
: <span lang="ar">أَقْتُلُ تَاكَاهِيرُو كَارَاسَاوَا.</span>
ピリオドの後ろにRight-to-left mark (U+200F, <code>&amp;rlm;</code>)やArabic letter mark(U+061C)を付ければ正しい表示がなされる。
下の例では、<code><nowiki><span lang="ar">أَقْتُلُ تَاكَاهِيرُو كَارَاسَاوَا.&amp;rlm;</span></nowiki></code>と<code><nowiki><span lang="ar">أَقْتُلُ تَاكَاهِيرُو كَارَاسَاوَا.&amp;#x061C;</span></nowiki></code>と記述した。
:<span lang="ar">أَقْتُلُ تَاكَاهِيرُو كَارَاسَاوَا.&rlm;</span>
:<span lang="ar">أَقْتُلُ تَاكَاهِيرُو كَارَاسَاوَا.&#x061C;</span>
HTMLで同様の動作をさせるには[[#dir属性]]を参照。この方法と組み合わせても良い<ref>[https://www.w3.org/TR/unicode-xml/#Format Format Characters Suitable for Use with Markup] - W3C Working Group Note</ref>。
== HTMLとCSSのノウハウ ==
以下で用いているCSSはHTMLのstyle属性の部分に記述している。
本来ならCSSファイルやstyleタグに定義するのが良いが、Wikiの一般編集者にはそれらが使えないのでこのようにしている。
また以下のことを適用するには、適用したい部分をspanタグで囲んでそのタグ内に属性を記述すれば良いが、その部分が既に他のタグ(divタグなど)で囲まれているなら、態々spanタグを増やさずに既に書かれているタグに新たに属性を適用する方が適当である。
[[利用者:Fet-Fe/common.css‎‎]]
=== lang属性 ===
言語を定義する<ref>https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang</ref>。
例えば中国語で“唐泽贵洋。”と表示すると、Wikiのhtmlのlang設定が全体として"ja"(日本語)になっているため、簡体字だけ変なフォントで表示されることがよくある。
そのような時に<code>lang="zh"</code>を設定すれば<span lang="zh">“唐泽贵洋。”</span>と表示される。
ウルドゥー語の<code>lang="ur"</code>を指定すれば、環境によっては自動でナスタアリーク体のフォントを使用してくれる。
: <span lang="ur" dir="rtl">اُردُو</span>
但し中国語、韓国語(ko)以外はあまり頼りにせず、自分でフォントを指定した方が良い（ユーザがそのフォントを持っていなければ意味は無いが）。
特にGoogleホーモのChromeとかいうゴリブラは極一部の言語しかlangタグが効いているように見えないので、ちゃんと見た目を整えたいならフォント指定は必須。
というかFirefoxを使う、それはできるよね。
言語コードについては[https://iso639-3.sil.org/code_tables/639/data?field_iso639_cd_st_mmbrshp_639_1_tid=255291 ISO 639-1]か[https://iso639-3.sil.org/code_tables/639/data?field_iso639_cd_st_mmbrshp_639_1_tid=94671 ISO 639-3]あたりを用いるのが良い。
地域の指定もできる。[https://www.iso.org/obp/ui/#search/code/ ISO 3166]などを用いる。
例えば台湾の中国語を指定したい場合、ISO 3166-1で示されているTWを用いて<code>lang="zh-TW"</code>とする。
: <span lang="zh-TW">“唐澤貴洋。”</span>
更には文字種の指定も可能。
ペルシャ語の<span lang="fa" dir="rtl">«تاکاهیرو کاراساوا قرآن را سوخت و به محمد توهین کرد.&#x061C;»</span>をナスタアリーク体で表記したい場合、[https://www.unicode.org/iso15924/iso15924-codes.html ISO 15924]で定義されたアラビア文字ナスタアリーク体の符号Aranを用いて<code>lang="fa-Aran"</code>とする。
但しこれは当職の確認した限りではSafariでしか効かなかった。
: <span lang="fa-Aran" dir="rtl">تاکاهیرو کاراساوا قرآن را سوخت و به محمد توهین کرد.&#x061C;</span>
シリア文字も環境が整っていればlang属性だけでフォントを切り替えられる。
: <span style="display: inline-block; width: 9em;">エストランゲロ体:</span><code>lang="syc-Syre"</code> → <span lang="syc-Syre" dir="rtl">ܐܩܛܘܠ ܠܗ ܠ܏ܛܐܩ ܩܐܪܐܣܐܘܐ܂</span>
: <span style="display: inline-block; width: 9em;">セルトー体:</span><code>lang="syc-Syrj"</code> → <span lang="syc-Syrj" dir="rtl">ܐܩܛܘܠ ܠܗ ܠ܏ܛܐܩ ܩܐܪܐܣܐܘܐ܂</span>
: <span style="display: inline-block; width: 9em;">ネストリウス体:</span><code>lang="syc-Syrn"</code> → <span lang="syc-Syrn" dir="rtl">ܐܩܛܘܠ ܠܗ ܠ܏ܛܐܩ ܩܐܪܐܣܐܘܐ܂</span>
しかしこれも環境によって動作が異なるのであまり当てにはせず、自分でフォントを指定した方が安定する。
=== dir属性 ===
書字方向を示す<ref>https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/dir</ref>。
このwikiは日本語に対応しているので基本的に書字方向はltrとなっている。
そのため普通にアラビア文字などrtl属性の文字を書くと、ピリオドがラテン文字のものと共通しているためにそれだけ右側に行ってしまう。
: <span lang="ar">حَرَقَ تَاكَاهِيرُو كَارَاسَاوَا ٱلْقُرْآنَ وَأَهَانَ مُحَمَّدًا.</span>
<code>dir="rtl"</code>を設定すれば正しい表示がなされる。
: <span lang="ar" dir=rtl>حَرَقَ تَاكَاهِيرُو كَارَاسَاوَا ٱلْقُرْآنَ وَأَهَانَ مُحَمَّدًا.</span>
Unicodeで同様の動作をさせるには[[#双方向テキスト]]を参照。この方法と組み合わせても良い。
=== 縦書き ===
日本語の縦書きは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>。
<code>&lt;ruby&gt;唐澤貴洋&lt;rt&gt;からさわたかひろ&lt;/rt&gt;&lt;/ruby&gt;</code>と記述することで下のような出力がなされる。
: <ruby>唐澤貴洋<rt>からさわたかひろ</rt></ruby>
更にrpタグを用いることで、rubyタグへの対応が無いブラウザでの表示をコントロールできる(でも今時そんなことをする必要はなさそう)。検索結果のスニペットにも現れる。
例えば<code>&lt;ruby lang="ko"&gt;唐澤貴洋&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;당택귀양&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;</code>の結果は下のようになる。
: <ruby lang="ko">唐澤貴洋<rp>(</rp><rt>당택귀양</rt><rp>)</rp></ruby>
但しrubyタグに対応していなければ下のようになる。
: <span lang="ko">唐澤貴洋(당택귀양)</span>
上の韓国語の例では、ハングルが詰まっているために漢字との対応が見づらくなっている。
これを解決するためにrbタグを用いるように解説しているサイトもあるが、標準ではなく推奨されておらず<ref>https://developer.mozilla.org/ja/docs/Web/HTML/Element/rb</ref>、動作も安定しない。
面倒でも一文字ずつrtタグを振る必要がある。
次の例では、上の例文はrbタグを用いて<code>&lt;ruby lang="ko"&gt;唐&lt;rb&gt;澤&lt;rb&gt;貴&lt;rb&gt;洋&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;당&lt;rt&gt;택&lt;rt&gt;귀&lt;rt&gt;양&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;</code>と、下の例ではrbタグを用いずに<code>&lt;ruby lang="ko"&gt;唐&lt;rt&gt;당&lt;/rt&gt;澤&lt;rt&gt;택&lt;/rt&gt;貴&lt;rt&gt;귀&lt;/rt&gt;洋&lt;rt&gt;양&lt;/rt&gt;&lt;/ruby&gt;</code>と記述している。
: <ruby lang="ko">唐<rb>澤<rb>貴<rb>洋<rp>(</rp><rt>당<rt>택<rt>귀<rt>양<rp>)</rp></ruby>
: <ruby lang="ko">唐<rt>당</rt>澤<rt>택</rt>貴<rt>귀</rt>洋<rt>양</rt></ruby>
ルビが長いと本文のスペースが大きくなる。
: <ruby lang="vi">唐澤貴洋<rp>(</rp><rt>Đường Trạch Quý Dương</rt><rp>)</rp></ruby>
[[#縦書き|縦書き]]ではルビも縦書きになる。
次に示す例では、<code>&lt;span lang="min-TW" style="writing-mode: vertical-rl;"&gt;&lt;ruby&gt;唐澤貴洋&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;トン𚿳チ̅ェㇰ𚿶クイ𚿱イウ𚿻&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;&lt;/span&gt;</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>&lt;ruby style="writing-mode: vertical-rl;"&gt;唐澤貴洋&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;𛀜𛃰𛀿𛂞𛁟𛀙𛂭𛄃&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;</code>というように書いている。
: <ruby style="writing-mode: vertical-rl;">唐澤貴洋<rp>(</rp><rt>𛀜𛃰𛀿𛂞𛁟𛀙𛂭𛄃</rt><rp>)</rp></ruby>
台湾で用いられている{{wpl|注音符号}}は横書きでも漢字の右側に振られる。
これを表示する為に、CSSのruby-positionにはinter-characterというものが定められている<ref>https://developer.mozilla.org/ja/docs/Web/CSS/ruby-position</ref>が、これを実装しているブラウザは2021年9月7日現在ない。
次に示す例では、rubyタグに<code>ruby-position: inter-character;</code>を設定している。
: <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で<code>vertical-align: middle;</code>を指定している。
下の例では、「唐」の字は<code>&lt;span style="writing-mode: vertical-rl; vertical-align: middle;"&gt;&lt;ruby&gt;唐&lt;rt&gt;ㄊㄤˊ&lt;/rt&gt;&lt;/ruby&gt;&lt;/span&gt;</code>で記述されている。他の文字も全く同じようにしている。
先述の通り、rubyタグでCSSを指定せず、それを囲むspanタグを書いてそちらに指定する。
: <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>を用いてルビをグループ化する。
但しこれも2021年9月7日現在Firefox以外では動作しない。
次の例では<code>&lt;ruby&gt;唐澤貴洋&lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;たうたくきやう&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;&lt;rtc&gt;&lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;だうぢやくきやう&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;&lt;/rtc&gt;&lt;/ruby&gt;</code>と記述している。
: <ruby>唐澤貴洋<rp>（</rp><rt>たうたくきやう</rt><rp>）</rp><rtc><rp>（</rp><rt>だうぢやくきやう</rt><rp>）</rp></rtc></ruby>
rubyタグを入れ子にすれば複数のルビを振ることができる。
下の例では<code>&lt;ruby lang="zh"&gt;&lt;ruby style="ruby-position: under; -webkit-ruby-position: after;"&gt;唐泽贵洋&lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;Тон Зә Гуй Ён&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;&lt;/ruby&gt;&lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;táng zé guì yáng&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;&lt;/ruby&gt;</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>
2つ目のrubyタグで<code>ruby-position: under;</code>を指定することで、ルビを文字の下に振っている。
しかしruby-positionは実験的なCSSであり、特にSafariに於いては2021年9月8日現在正式な実装がされていないため、ベンダープレフィックスを付けなければならない<ref>https://developer.mozilla.org/ja/docs/Web/CSS/ruby-position#browser_compatibility</ref>。
また取ることのできる値もW3Cの定めたものとは異なる。ここでは<code>-webkit-ruby-position: after;</code>と記述している。
このようになるべく多くのブラウザで挙動を同じくする為には、各ブラウザの対応を確認する必要がある<ref>但しIEのレンダリングが死んでもなんとも思わん</ref>。
==== subタグ・supタグ ====
訓民正音が制定された直後の李氏朝鮮では、訛った漢語の読みを正そうという意識の下「{{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>。
これをHTML上で表現するにはsubタグを用いれば良い。以下の例では、訓民正音の部分のみをすべてsubタグで囲んでいる。
: 世<sub>솅〮</sub>宗<sub>조ᇰ</sub>御<sub>ᅌᅥᆼ〮</sub>製<sub>졩〮</sub>訓<sub>훈〮</sub>民<sub>민</sub>正<sub>져ᇰ〮</sub>音<sub>ᅙᅳᆷ</sub>
但しこれを[[#縦書き|縦書き]]にすると読みの部分が左に寄ってしまう。
<div lang="oko" style="writing-mode: vertical-rl;">
予<sub>영</sub>ㅣ爲〬<sub>윙〮</sub>此<sub>ᄎᆞᆼ〯</sub>憫<sub>민〯</sub>然<sub>ᅀᅧᆫ</sub>ᄒᆞ〮야〮
</br>
新<sub>신</sub>制<sub>졩〮</sub>二<sub>ᅀᅵᆼ〮</sub>十<sub>씹〮</sub>八<sub>바ᇙ〮</sub>字<sub>ᄍᆞᆼ〮</sub>ᄒᆞ〮노니〮
<br>
欲<sub>욕〮</sub>使<sub>ᄉᆞᆼ〯</sub>人<sub>ᅀᅵᆫ</sub>人<sub>ᅀᅵᆫ</sub>ᄋᆞ〮로〮易〬<sub>잉〮</sub>習<sub>씹〮</sub>ᄒᆞ〮야〮
<br>
便<sub>뼌</sub>於<sub>ᅙᅥᆼ</sub>日<sub>ᅀᅵᇙ〮</sub>用<sub>요ᇰ〮</sub>耳<sub>ᅀᅵᆼ〯</sub>니라〮
</div>
これを防ぐには、subタグの代わりにsupタグを用いれば良い。
<div lang="oko" style="writing-mode: vertical-rl;">
나랏〮말〯ᄊᆞ미〮
<br>
中<sup>듀ᇰ</sup>國<sup>귁〮</sup>에〮달아〮
<br>
文<sup>문</sup>字<sup>ᄍᆞᆼ〮</sup>와〮로〮서르ᄉᆞᄆᆞᆺ디〮아니〮ᄒᆞᆯᄊᆡ〮
<br>
이〮런젼ᄎᆞ〮로〮어린〮百<sup>ᄇᆡᆨ</sup>姓<sup>셔ᇰ〮</sup>이〮니르고〮져〮호ᇙ〮배〮이셔〮도〮
<br>
ᄆᆞᄎᆞᆷ〮내〯제ᄠᅳ〮들〮시러〮펴디〮몯〯ᄒᆞᇙ노〮미〮하니〮라〮
</div>
これらのタグを用いて漢文の返り点や口訣などを表記することができる。
但し返り点と送り仮名は<ref>[https://www.jagat.or.jp/archives/21315 漢文の句読点や返り点の配置処理 - 公益社団法人日本印刷技術協会]</ref>や<ref>[https://www.jagat.or.jp/%3Fp%3D21747 漢文の送り仮名・読み仮名の配置処理 - 公益社団法人日本印刷技術協会]</ref>に従い、位置を調整するために<code>&amp;#x3000;</code>（和字間隔）を多用している。
<div style="writing-mode: vertical-rl;">
<ruby>無<sub style="font-size: 0.5em;">㆓&#x3000;</sub><rt style="font-size: 0.5em;">&#x3000;クシテ</rt></ruby>恆產<sub style="font-size: 0.5em;">㆒</sub>而<ruby>有󠄁<sub style="font-size: 0.5em;">㆓</sub><rt style="font-size: 0.5em;">&#x3000;ル&#x3000;</rt></ruby>[[恒心|恆心]]<sub style="font-size: 0.5em;">㆒</sub><ruby>者󠄁、<rt style="font-size: 0.5em;">&#x3000;ハ&#x3000;&#x3000;</rt></ruby><ruby>惟<rt style="font-size: 0.5em;">&#x3000;ダ</rt></ruby><ruby>士<sub style="font-size: 0.5em;">&#x3000;</sub><rt style="font-size: 0.5em;">&#x3000;ノミ</rt></ruby><ruby>爲<sub style="font-size: 0.5em;">㆑</sub><rt style="font-size: 0.5em;">&#x3000;ス&#x3000;</rt></ruby><ruby>能。<sub style="font-size: 0.5em;">&#x3000;</sub><rt style="font-size: 0.5em;">&#x3000;クスルヲ</rt></ruby><br>
<ruby>若<sub style="font-size: 0.5em;">㆑</sub><rt style="font-size: 0.5em;">&#x3000;キハ</rt></ruby><ruby>民<rt style="font-size: 0.5em;">&#x3000;ノ</rt></ruby><ruby>則<rt style="font-size: 0.5em;">&#x3000;チ</rt></ruby><ruby>無<sub style="font-size: 0.5em;">㆓&#x3000;</sub><rt style="font-size: 0.5em;">&#x3000;ケレバ</rt></ruby>恆產、<sub style="font-size: 0.5em; margin-top: -2em;">㆒&#x3000;</sub><ruby>因<sub style="font-size: 0.5em;">&#x3000;</sub><rt style="font-size: 0.5em;">&#x3000;リテ</rt></ruby><ruby>無<sub style="font-size: 0.5em;">㆓</sub><rt style="font-size: 0.5em;">&#x3000;シ&#x3000;</rt></ruby>恆心。<sub style="font-size: 0.5em; margin-top: -2em;">㆒&#x3000;</sub>
<br><br>
<ruby style="ruby-position: under; -webkit-ruby-position: after;"><ruby style="ruby-position: over; -webkit-ruby-position: before;">將<sub style="font-size: 0.5em;">㆑</sub><rt style="font-size: 0.5em;">まさニ</rt></ruby><rt style="font-size: 0.5em;">す&#x3000;&#x3000;</rt></ruby><ruby>殺󠄀<sub style="font-size: 0.5em;">㆓&#x3000;&#x3000;</sub><rt style="font-size: 0.5em;">ころサント</rt></ruby><ruby>唐󠄁<rt>から</rt>澤<rt>さは</rt>貴<rt>たか</rt>洋<rt>ひろ</rt>。<rt style="font-size: 0.5em;">ヲ&#x3000;</rt></ruby><sub style="font-size: 0.5em; margin-top: -2em;">㆒&#x3000;</sub>
<br><br>
無恒産而有恒心<ruby>者󠄁<rt>&#x3000;阝</rt></ruby>惟<ruby>士<rt>&#x3000;乀</rt></ruby>爲<ruby>能&#x3000;&#x3000;<rt>&#x3000;乀仒匕卜&#x3000;</rt></ruby><br>
若民則無恒<ruby>産因<rt>&#x3000;乀丆&#x3000;</rt></ruby>無恒<ruby>心&#x3000;<rt>&#x3000;乀匕亽</rt></ruby>
<br><br>
無恒産而有恒心者󠄁<sup style="font-size: 0.5em;">는</sup> 惟士爲能<sub style="font-size: 0.5em; display: inline-block;">이어<br>니와</sub><br>
若民則無恒産<sup style="font-size: 0.5em;">이면</sup> 因無恒心<sub style="font-size: 0.5em; display: inline-block;">이니<br>라</sub>
</div>
=== 文字参照 ===
HTMLのマークアップに使われる文字や互換漢字などは、その文字そのものを書いても別の形に変換されてしまう。
これを防ぐには{{wpl|文字参照}}を用いて別の形で記述する。
例えば<や>はHTMLのマークアップには欠かせない文字である。
下記の説明ではHTMLのマークアップ自体を見える形で表示しているが、当然ただHTMLを書くだけではマークアップは変換されてレンダリングされてしまう。
*記述上
<code>
&lt;div style="border: solid 3px #000000;"&gt;
&lt;p&gt;東京高等裁判所平成27年(ネ)第1347号&lt;/p&gt;
&lt;p&gt;・依頼者はステロイドを過剰に処方され色素沈着＆パニック障害発症&lt;/p&gt;
&lt;p&gt;・病院を相手取った控訴審になぜかパカデブを起用(医療に強い唐澤貴夫弁護士と混同した可能性大)&lt;/p&gt;
&lt;p&gt;・パカデブ、医療訴訟の経験もないのに引き受ける&lt;/p&gt;
&lt;p&gt;・案の定爆死。医療ミスの事実すら完全に否定され控訴棄却という最悪の結果に&lt;/p&gt;
&lt;p&gt;・依頼者は病院の責任も追及できず30万ぼったくられて泣き寝入り&lt;/p&gt;
&lt;/div&gt;
</code>
*実際の表示
<div style="border: solid 3px #000000;">
<p>東京高等裁判所平成27年(ネ)第1347号</p>
<p>・依頼者はステロイドを過剰に処方され色素沈着＆パニック障害発症</p>
<p>・病院を相手取った控訴審になぜかパカデブを起用(医療に強い唐澤貴夫弁護士と混同した可能性大) </p>
<p>・パカデブ、医療訴訟の経験もないのに引き受ける </p>
<p>・案の定爆死。医療ミスの事実すら完全に否定され控訴棄却という最悪の結果に </p>
<p>・依頼者は病院の責任も追及できず30万ぼったくられて泣き寝入り</p>
</div>
「記述上」に示したように表示するには、&lt;の代わりに<code>&amp;lt;</code>と、&gt;の代わりに<code>&amp;gt;</code>と記述している。
*編集画面でのHTMLソースの記述
<code>
&amp;lt;div style="border: solid 3px #000000;"&amp;gt;
&amp;lt;p&amp;gt;東京高等裁判所平成27年(ネ)第1347号&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;・依頼者はステロイドを過剰に処方され色素沈着＆パニック障害発症&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;・病院を相手取った控訴審になぜかパカデブを起用(医療に強い唐澤貴夫弁護士と混同した可能性大)&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;・パカデブ、医療訴訟の経験もないのに引き受ける&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;・案の定爆死。医療ミスの事実すら完全に否定され控訴棄却という最悪の結果に&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;・依頼者は病院の責任も追及できず30万ぼったくられて泣き寝入り&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
</code>
&amp;lt;と表示したいなら<code>&amp;amp;lt;</code>と記述すれば良い。
文字参照には文字実体参照と数値文字参照とが存在する。
文字実体参照は上記に示したように<code>&amp;lt;</code>のような形で文字を表すものである。
一部の文字にのみ定められている。
数値文字参照はISO/IEC 10646に定められた数字（Unicodeのものと同一）を参照して表示するものである。
例えば&#x003C;(U+003C)を表示するなら、<code>&amp;#x003C;</code>と記述すれば良い。
これを用いれば{{wpl|CJK互換漢字}}のように正規化されてしまう文字もそのまま表示できる。
但し異体字を表示する目的で用いるなら、互換漢字を用いずに[[#異体字セレクタ|IVS異体字]]を用いるべきである。
== 気になる資料 ==
* Pablo Sánchez Domínguez, ''Origen y gramática del romance andalusí'', Córdoba: Editorial Almuzara, 2020.
* Fr. Francis T.J. Sdb, ''First Ever Wancho Grammar cum English-Wancho Tutor'', Dimapur: Don Bosco Publications, 2007.
* <del>Gholam Djelani Davary, ''Baktrisch : ein Wörterbuch'', Heidelberg: Julius Groos, 1982.</del>
どっかにPDFでも落ちてないナリかねえ
== 脚註 ==
<references />
匿名利用者
「https://krsw-wiki.in/wiki/特別:携帯機器差分/91806」から取得

案内メニュー