Help us understand the problem. What is going on with this article?

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

image.png

三行まとめ

  • Webでも縦書きで美しい日本語の「入力」ができるか試したかった
  • contenteditablewriting-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;}

これらのcontenteditablewriting-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」にお世話になりました。

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

成果物

Dec-25-2019 05-00-32.gif
https://ore0.github.io/verticalEditor/ ※Chrome推奨です。

おわりに

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

参考リンク

oreo
「壊したCSSの数だけ強くなれる」
goodpatch
Goodpatch(株式会社グッドパッチ)は東京、ベルリン、台北にあるWeb / iOS / AndroidなどマルチデバイスアプリケーションのUIデザイン会社です。サービスやプロダクトの企画設計から関わりコンセプトメイキング、UX設計、プロトタイピング、UIデザイン、実装までワンストップで提供しています。
https://goodpatch.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした