やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

rubyタグを楽に編集する方法を考えてみた

rubyタグ編集方法の案

 rubyタグを含む文書を楽に書きたい。そのための方法を考えてみた。

 4つの方法がある。点数をつけてみた。

方法 形式
IMEと連動する 7 html
WISYWIGで書く 4 html
中間テキスト形式で書く 6 text
HTMLで書く 0 html
2
1
0
方法 入力量 編集時描画 キー操作 テキストエディタ編集
IMEと連動する
WISYWIGで書く
中間テキスト形式で書く
HTMLで書く

IMEと連動する

 IMEで入力した読みをそのままルビにする。

難しすぎて断念した。

 JSのAPIと連動させる。APIは以下。

 難しすぎて断念した。主な原因はIME入力をキャンセルできなかったため。event.preventDefault()でキャンセルできる。しかしブラウザによってはできない。Chromium 86で確認したがキャンセルできなかった。

 IME入力がキャンセルできないかった。IME入力確定したときに<ruby>タグを挿入させる処理に変えようとした。挿入自体はできたのだが、IME入力された文字を消すことができなかった。IME入力キャンセルできればIME文字入力を回避できただろう。キャンセルできないのはブラウザの仕様らしい。

 代替手段を考えた。IME確定キャンセルができなかったので、仕方なく出力されてしまったIME入力確定文字をあとで削除することにした。削除するにはその文字を範囲指定する必要がある。Selection API, Rangeを使う。

 テキストの範囲選択ができなかった。Range.setStart()を使う。しかし、選択する方法は対象の内容次第で2種類ある。これが大変すぎて実装を諦めた。

範囲選択する対象ノード 方法
TextNode 文字数を指定する
ElementNode 子要素の位置を指定する

 条件分けせねばならないのが面倒くさい。これは回避できない。HTMLがそういうものだから。

TextNodeタイプ

<p id="target">内容</p>

ElementNodeタイプ

<p id="target">内容<br>内容</p>

 対象がElementNodeのときが大変。以下の2段階を経て、ようやく範囲選択したテキスト位置を特定できる。

  1. 子要素の位置を取得する
  2. 1の子要素の位置の文字位置を取得する

 諦めた。たかが選択位置をゲットするだけでこれだけ苦労せねばならない。あまりにも実装までの道のりが遠い。コードを書いてみたが、DOM操作方法がわからないというところからスタートせねばならなかった。jQueryを使えばマシになるだろうが、その準備も面倒。やる気が失せた。

 いずれ技術情報の走り書きをしておきたい。

WISYWIGで書く

 出力結果をみながら編集できる。テキストエディタで範囲選択しつつ、ボタンをクリックすると、ボールド体などの書体を設定できる。UIは以下のような見た目をしている。

[B][I]
+----------------+
|                |
|                |
|                |
|                |
+----------------+

 ルビ用のWISYWIGは見かけない。大抵は<b>のボールド体など、昔ながらの簡易なタグのみサポートしている。

 ルビ用のWISYWIGが簡単に使えるライブラリを知らない。

中間テキスト形式で書く

 別のテキスト形式をつくる。それで入力し、HTMLへ変換する。

|漢字《かんじ》
{漢字|かんじ}

 既存のものは上記2タイプに分けられる。前者は青空文庫タイプ。カクヨム小説家になろうなどのサイトでも使われている。後者はでんでんマークダウン。電子書籍を書く軽量マークアップ言語である。

 以下の形式でも可。ただし親文字が漢字でなければならない。

漢字(かんじ)

HTMLで書く

 なんの工夫もない。以下のようにrubyタグを直に書く。これが辛いから楽をしたかった。

<ruby>漢字<rt>かんじ</rt></ruby>

 ウザいことに複数の要素を入れることができる。

<ruby>山田<rt>やまだ</rt>太郎<rt>たろう</rt><ruby>

 クソすぎることに無数の関連タグがある。紛らわしいゴミ。

関連タグ 価値なし
<rp> ルビを囲む記号を指定する。ルビ対応ブラウザでは無視される。
<rb> ルビを振る対象文字を指定する。HTML5で廃止。
<rtc> <rb>を入れるコンテナ。

対象環境

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux