ブラウザでの縦書きエディタ

はじめに

ブラウザでは基本的に縦書きは不可能である。なぜかというと、縦書きを使用している国は日本と台湾しかないが、主要なブラウザは横書きしか存在しない英語圏で開発されているからである。そこで、縦書きも横書きもできるテキストエディタの制作に挑戦した。

縦表示

CSSでwriting-modeをvertical-rlにすれば縦表示が可能になる。

css

.tate {
    writing-mode: vertical-rl;
}

アプリの設計

表示部分はReactを使用した。基本的にブラウザで動作するエディタはDomを直接操作して表示するが、Reactを使用することによりシンプルでわかりやすい構造にできた。コードを見なくても構造が直感的に理解できる。

EditorのReactコンポーネント

   <EditorViewProvider editor={editor} options={{ writingMode, wordWrap }}>
      <OverflowGuard>
        <Margin>
          <MarginViewOverlays>
            <LineNumbers />
          </MarginViewOverlays>
        </Margin>
        <EditorScrollbar options={editor.getOptions()}>
          <LinesContent>
            <IndentGuidesProvider>
              <Selections />
              <LineDecorations />
              <ViewLines />
              <ViewCursors />
            </IndentGuidesProvider>
          </LinesContent>
        </EditorScrollbar>
        <Minimap />
      </OverflowGuard>
    </EditorViewProvider>

問題点

IMEの変換候補ウィンドウがFireFox以外だと横のままで、ちょうど入力している文字と重なる。
ブラウザの仕様で解決不可能なので、FireFox以外では横書きのみとした。

成果物

FireFoxのみ縦書き・横書きが出来る。それ以外のブラウザは横書きのみ。
https://cerulean-babka-3056e9.netlify.app/

おわりに

基本的な動作のみであるが、とりあえず完成したので公開する。

参考リンク

• Webブラウザでも縦書きの美しい日本語入力を。