Font Editor

Vertical writing

Han text is often set in columns, top to bottom, and the Font Editor designs for columns as well as lines. These settings appear when a module includes Han.

Metrics

Under Vertical writing mode in Font setup:

  • Vertical line height: the distance from one column to the next. It starts at the em height.
  • Letter spacing: space added below each glyph in a column. It follows the horizontal letter spacing until you change it.
  • Rotation centreline: the height of the square's middle. Brackets and dashes turn about it in a column, so it sets where they sit side to side. It also shows on the glyph canvas as the Center line: drag it to move it, double-click to reset it.

Upright and rotated

In a column, most Han characters stay upright, and Latin letters and figures turn a quarter turn clockwise. Brackets, dashes and the ellipsis turn too, unless you draw them a vertical form. The Vo line under the character, beside the glyph canvas, says which a character does.

Vertical forms

To draw a character's vertical form, add a variant and tick Use for vertical layout in the Layout section of its Edit tab. A vertical form needs a plain version of the same variant alongside it: the exported font swaps from one to the other.

Previewing

Tick Vertical preview in the Font preview panel to see the text in lines and in columns side by side. The specimens can set text vertically too.

Kerning and placement

Kerning and Placement each have a Horizontal and Vertical switch, and Auto-kern kerns either axis or both. Vertical pairs are kept apart from horizontal ones. In a vertical preview, drag a glyph sideways to place it against its neighbour. Vertical proportional and half widths are set under Width variants in the Edit tab, once the vertical cut is turned on for export.

Exporting

Every exported font carries vertical metrics, so it already sets well in a column. Also emit a vertical cut, under Vertical writing in Export, adds a second font, named after the family with "Vertical" at the end, which carries the vertical kerning, placement and widths. Use it with writing-mode: vertical-rl in CSS.