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

6502 ワード
editor CSS Vue.js Markdown CSS テキストリンク

三行まとめ

  • Webでも縦書きで美しい日本語の「入力」ができるか試したかった
  • contenteditableとwriting-modeで実装した
  • ついでにMarkdownで書けるようにした

実装方法

contenteditable

contenteditableとは、ページ利用者にDOMの編集を許可することができる属性です。デフォルト状態ではfalseを取ります。また、未指定の場合は親要素の値を継承するため、親要素でcontenteditableを有効にした場合は子要素の編集も併せて可能となります。

html
<div contenteditable="true">
  <p>編集が可能な要素</p>
  <p contenteditable="false">編集が不可能な要素</p>
</div>

この記述だけでスタイルを保持したままテキストの編集が可能となります。

writing-mode

cssのwriting-modeとは、テキスト行（垂直あるいは平行）とテキストのフロー方向（左向きあるいは右向き）を選択する際に用いるプロパティです。デフォルト状態ではhorizontal-tb（テキスト行は左から右方向の水平、フロー方向は上から下）を取ります。今回は右上から左下へ進むように組みたかったため、vertical-rlを指定しました。

css
.vertical-text {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;}

これらのcontenteditableとwriting-modeを指定し、最低限のスタイルを定義するだけでも、このように縦書き入力を実現することができます。とても簡単ですね。

See the Pen Vertical Editor_alpha by oreo (@oreo) on CodePen.

実装（その他）

  • テキストのスタイル
    • 以下のように指定しました。
css
.vertical-text {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 20px;
  font-family: "Noto Serif JP", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  color: #2c3e50;
  line-height: 2em;
  text-indent: 1em;
}
  • フォント
    • 今回はGoogle FontsのNoto Serif JPにお世話になりました。
  • 入力書式
    • せっかくcontenteditableを用いて実装したという背景もあり、見出しやリストも出力すべく、Markdownへの対応を行いました。
    • 今回はリッチテキストライブラリ「ProseMirror」のVue.js向けラッパー「tiptap」にお世話になりました。

これらの工程を経て、今回の縦書きエディタの試作が完成しました。

成果物


https://ore0.github.io/verticalEditor/ ※Chrome推奨です。

おわりに

「縦書き」かつ「日本語」かつ「Web」の入力方式は非常にニッチであるが故に先行事例が非常に少ないですが、実装してみると数行程度の記述で簡単に実現できましたね。一方でカーソルキーでの操作がしづらいことや、ブラウザでは細かな文字組み対応が難しいことが課題として挙げられます。これからも引き続き調査や改良を進めながら、縦書き入力を日常的に使えるように活用方法やよりよい実装パターンを見いだせればと思います。

参考リンク