HTML-Aid

ナビバー

各アイコンとその機能は以下の通りです。

簡易タグ

HTML ソース中の決められた書式で書かれた部分を、HTML の要素に変換します。
但し、<script> 要素、<ruby> 要素、<pre> 要素、<textarea> 要素、class="sic"(「原文ママ」の意)の要素とその子要素は、処理対象にしません。

以下で説明する記述方法は、同一文書内でも、同一行内でも、混在可能です。

対応 UA

<ruby> への対応は以下の通りです。

• MSIE
  バージョン 5.0 以降で対応します。
• Opera
  バージョン 15 以降で対応します。 それ以前は標準では未対応ですが、エクステンションで対応可能です。
• Firefox
  バージョン 38 以降で対応します。 それ以前は標準では未対応ですが、アドオンで対応可能です。
• Safari
  バージョン 4.1 以降で対応した様です。
• Chrome
  バージョン 4.0 以降で対応した様です。
• Vivaldi
  初版から対応していると思われます。
• Edge
  初版から対応していると思われます。

文字種

クロサワ式・コメント版と青空文庫では、処理対象とする語の境界を自動判別します。

文字種を「漢字グループ」、「平仮名グループ」、「片仮名グループ」、「その他グループ」、「区切り文字グループ」に分類して‥‥

1. 文字列を後ろから走査し
2. 「漢字グループ」、「平仮名グループ」、「片仮名グループ」、「その他グループ」の種別が変化したら、そこが境界
3. または「区切り文字グループ」の文字が現れたら、そこが境界

‥‥というルールで文字列を分割します。

クロサワ式・コメント版

当サイトの独自形式で、全てのページをこの方式で書いています。
ルビや指示がコメントで隠されているので、未処理のテキストの可読性を損ないません。

ルビを指示するコメントの直前の単語を自動的に処理対象とします。 漢字と仮名が混ざった語や、区切り文字を含む語を対象にするには、<!--!--> というコメントを語の前に置いて、境界を明示します。
例えば「阿Q」という語にルビを振る時、「阿Q<!--:あきゅう-->」とすると「文字種の境界を語の区切りとする」というルールなので「Q」の部分にルビが付きます(阿Q)。 この場合には「<!--!-->阿Q<!--:あきゅう-->」とします(阿Q)。

コメントの中は #PCDATA ではないので、本来なら文字参照は使えません。 というか、書いたままそこにあるだけなので、表示の為に手が加わる事はありません。
が、不安なく記号文字を書く為に、そして他のルビ記述の形式と合わせる為に、コメントの中の文字参照を独自に解決します。
文字実体参照と、数値文字参照は 16 進数か 10 進数で 0x10FFFF(1,114,111)までが書けます。

• 読: <ruby> グループルビ
  ルビを振ります。
  • 例 : 漢字<!--読:かんじ--> ➜ 漢字
  非対応 UA では読みを括弧書きで表示します。 オフにすると語の上に点線が表示され、読みをツールチップ表示します。
  <!--読:よみがな--> は “読” を省略して <!--:よみがな--> と表記可能です。
• 読: <ruby> モノルビ
  漢字と読みを |(0x7C) で区切ってそれが同数だと、モノルビになります。
  • 例 : <!--!-->魑|魅|魍|魎<!--:ち|み|もう|りょう--> ➜ 魑|魅|魍|魎
  自動判定で区切りとする文字を含むので、<!--!--> を前置してください。
• 常: <ruby>
  強制ルビです。
  • 例 : 漢字<!--常:かんじ--> ➜ 漢字
  UA がルビに対応しているか否かに関わらず、常にルビタグを生成します。 オフには出来ません。
• 即: <span>
  ツールチップを表示します。
  • 例 : グレース<!--即:なべのすけ--> ➜ グレース
  マウスカーソルを本文に乗せると説明文をツールチップ表示します。
• 略: <abbr>
  略語です。
  • 例 : i18n<!--略:internationalization--> ➜ i18n
  マウスカーソルを本文に乗せると説明文をツールチップ表示します。
• 頭: <abbr>
  頭字語です。
  • 例 : WWW<!--頭:world wide web--> ➜ WWW
  マウスカーソルを本文に乗せると説明文をツールチップ表示します。
  元々は <acronym> に変換していましたが、もう廃れた要素なので、<abbr> に変換します。

クロサワ式・空白版

当サイトの独自形式で、かつては全てのページをこの方式で書いていました。
指示が幅ゼロの空白なので、未処理のテキストの可読性を損なわないと思って作りました。 実際には、U+200B を □(所謂“豆腐”) で表示してしまう端末があって、意図通りにはいきませんでした。 その上、未処理だと読みが括弧書きで表示されるので、一般的な括弧でも可読性は今一つ良くありませんでした。
この反省が、後にクロサワ式・コメント版を作る契機になりました。

• グループルビ
  
  • 例 : ​漢字(かんじ) ➜ ​漢字(かんじ)
  数値文字参照を使わずに書くと、「zero width space」の名前の通りに見えなくなるエディタもあるので、編集には注意が必要です。

青空文庫

青空文庫のコンテンツでの記述方法です。

• グループルビ
  
  • 例 : ｜漢字《かんじ》 ➜ ｜漢字《かんじ》
  開始記号は ｜(U+FF5C、1-01-35 包摂) 、ルビを囲む括弧は 《(U+300A、1-01-52) と 》(U+300B、1-01-53)です。
  開始記号 ｜ がないと、クロサワ式・コメント版と同じルールで処理対象とする語の境界を自動判別します。 本家青空文庫のルールと判別ルールが同じかどうかは判りません。

pixiv

pixiv のコンテンツでの記述方法です。

• グループルビ
  
  • 例 : [[rb:漢字 > かんじ]] ➜ [[rb:漢字 > かんじ]]
  お知らせ以外に正確なルールが判りませんでした。 とりあえず > の前後の空白は 0 個以上(つまり、なくても、いくつあっても可)として実装しました。

Unicode

Unicode の Interlinear annotation で漢字と読みを区切る方法です。

• グループルビ
  
  • 例 : 漢字かんじ ➜ 漢字かんじ

JIS X 4052

JIS X 4052「日本語文書の組版指定交換形式」に基づく方法です。

• グループルビ
  
  • 例 : _^漢字(かんじ)^_ ➜ _^漢字(かんじ)^_
• モノルビ
  
  • 例 : _^魑(ち)魅(み)魍(もう)魎(りょう)^_ ➜ _^魑(ち)魅(み)魍(もう)魎(りょう)^_

JIS X 4081

JIS X 4081「日本語電子出版検索データ構造」に基づく方法です。

• グループルビ
  
  • 例 : 漢字かんじ ➜ 漢字かんじ
  検索すると、使用する制御文字が ἖ ἆ ἇ となっている情報に多く行き着きます。 でも Unicode だとこの範囲は Greek Extended なので、その 16 ビットコードのままデータにするのは問題があります。
  該当規格を調べてみると、本文データ内記述子や文字は 2 バイト単位で説明しているだけで、実際は 8 ビットずつ 2 つの制御文字としてデータにするのが自然な理解だと思います。 なので、このプログラムでも 8 ビットずつ 2 つの制御文字として扱います。

ダウンロード

• htmlaid.js 9,749 bytes
• mod_navi.js 25,621 bytes
• mod_ruby.js 58,031 bytes
• htmlaid.css 4,112 bytes

履歴

02-FEB-2019(SAT)

version 4。
構造をすっきりさせる為に、イチから書き直し。
廃止していた「クロサワ式・空白版」、「青空文庫」、「Unicode」、「JIS X 4052」、「JIS X 4081」を復活、「pixiv」を追加。

07-FEB-2011(MON)

version 3。
機能を「クロサワ式・コメント版」のみにして、スイッチングを CSS から DOM にした。

17-FEB-2008(SUN)

versionn 2。
「青空文庫」、「Unicode」、「JIS X 4052」、「JIS X 4081」のルビに対応。

29-DEC-2007(SAT)

version 1。
出来た、動いた。