rubyタグ編集方法の案
rubyタグを含む文書を楽に書きたい。そのための方法を考えてみた。
案
4つの方法がある。点数をつけてみた。
方法 | 点 | 形式 |
---|---|---|
IMEと連動する | 7 | html |
WISYWIGで書く | 4 | html |
中間テキスト形式で書く | 6 | text |
HTMLで書く | 0 | html |
印 | 点 |
---|---|
○ | 2 |
△ | 1 |
☓ | 0 |
方法 | 入力量 | 編集時描画 | キー操作 | テキストエディタ編集 |
---|---|---|---|---|
IMEと連動する | ○ | ○ | ○ | ☓ |
WISYWIGで書く | △ | ○ | △ | ☓ |
中間テキスト形式で書く | △ | △ | ○ | ○ |
HTMLで書く | ☓ | ☓ | ☓ | ☓ |
IMEと連動する
IMEで入力した読みをそのままルビにする。
難しすぎて断念した。
難しすぎて断念した。主な原因は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の子要素の位置の文字位置を取得する
諦めた。たかが選択位置をゲットするだけでこれだけ苦労せねばならない。あまりにも実装までの道のりが遠い。コードを書いてみたが、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> を入れるコンテナ。 |
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
$ uname -a Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux