API

type WritingMode = 'horizontal-tb' | 'vertical-rl' | 'vertical-lr';

interface VerticalWritingOptions {
  mode?: WritingMode;
  lineLength?: number;
}

verticalWriting(options)

Milkdown に layout plugin を登録します。戻り値は Milkdown plugin array のため、editor.use に直接渡せます。

editor.use(verticalWriting({
  mode: 'vertical-rl',
  lineLength: 40,
}));

Option	Type	Default	説明
mode	WritingMode	horizontal-tb	初期 CSS writing mode。
lineLength	正の整数	制限なし	1 行あたりの最大送り量。全角文字単位。

lineLength は文字数カウンターではなく、描画時の送り量です。禁則処理により句読点の位置は境界前後に動くことがあり、半角 Latin text や inline node を全角 1 文字としては数えません。省略すると制限はありません。

CSS は明示的に import します。

import '@illusions-lab/milkdown-plugin-vertical-writing/style.css';

changeWritingMode(mode)

エディターを再構築せずに writing mode を変更する action を返します。

editor.action(changeWritingMode('horizontal-tb'));
editor.action(changeWritingMode('vertical-rl'));
editor.action(changeWritingMode('vertical-lr'));

文書、選択、undo history を保持し、論理的なスクロール進捗を新しい layout に移します。

changeLineLength(number | null)

行長を変更する action を返します。正の整数で設定し、null で解除します。

editor.action(changeLineLength(40));
editor.action(changeLineLength(null));

行長を有効にした画像は max-inline-size のみで制約されます。画像は引き伸ばされず、intrinsic aspect ratio は維持されます。

WritingMode

公開される WritingMode の正しい値は 3 つだけです。

値	Layout
horizontal-tb	横書き。行は上から下へ進む。
vertical-rl	縦書き。列は右から左へ進む。
vertical-lr	縦書き。列は左から右へ進む。

不正な mode、0 以下、または整数でない line length は、plugin または action の作成時に TypeError になります。

Live demo

上で説明した writing mode と line length の動作を controls で試せます。