API

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

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

verticalWriting(options)

Registers the layout plugin with Milkdown. It returns a Milkdown plugin array, so pass it directly to editor.use.

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

Option	Type	Default	Meaning
mode	WritingMode	horizontal-tb	The initial CSS writing mode.
lineLength	positive integer	unrestricted	Maximum advance per line in full-width ideographic character units.

lineLength uses rendered advance, not a character counter. Line-breaking rules can move punctuation around the nominal boundary, and Latin text or inline nodes do not each equal one full-width character. Omit lineLength to remove the limit.

The package CSS must be imported explicitly:

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

changeWritingMode(mode)

Returns an action that changes the writing mode without rebuilding the editor.

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

The change keeps the document, selection, and undo history. The plugin preserves logical scroll progress across the new layout.

changeLineLength(number | null)

Returns an action that updates the maximum line length. Pass a positive integer to set a limit, or null to remove it.

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

With a line length enabled, images are constrained only with max-inline-size. An image is not forced to a new size and its intrinsic aspect ratio is preserved.

WritingMode

The exported WritingMode type has exactly three legal values:

Value	Layout
horizontal-tb	Horizontal lines, top to bottom.
vertical-rl	Vertical lines, progressing right to left.
vertical-lr	Vertical lines, progressing left to right.

Invalid modes and non-positive or non-integer line lengths throw a TypeError when the plugin or action is created.

Live demo

Use the controls to invoke the same writing-mode and line-length behaviour described above: