Paragraph settings are alignment, line height, the space after a paragraph and letter spacing. They belong to a whole paragraph, never to a few words, so a command changes every paragraph it reaches from start to end. Your toolbar sets each one with a single command.
Call the commands
// Konva: const rt = enableRichText(stage)
rt.manager.setAlignment("center");
rt.manager.setLineHeight(1.3);
rt.manager.setParagraphSpacing(0.5);
rt.manager.setLetterSpacing(1);
// Plain canvas: const rt = createCanvasRichText({ onChange: render })
rt.setAlignment("center");
The commands have the same names and arguments on both surfaces. The rest of this page shows the Konva calls.
Which paragraphs change
- A selected box that is not being edited: every paragraph in the box.
- A box being edited, with text selected: every paragraph the selection touches, each one whole.
- A box being edited, with only the cursor: the paragraph the cursor is in. A cursor at the end of a paragraph's text belongs to that paragraph.
- Boxes you name: pass a list of boxes as the optional last argument to change those boxes instead of the
selection:
rt.manager.setAlignment("center", [headline, footer]).
Each command is one undo step, also when it changes several boxes.
Alignment
rt.manager.setAlignment("left"); // "left" | "center" | "right" | "justify"
Alignment places each line of the paragraph in the box. "justify" spreads the spare width over the spaces of each
wrapped line, so both edges are straight; the paragraph's last line is set to the left. A line that fills the whole
width starts at the left edge whatever the alignment.
A list's markers follow the alignment of their items. A line laid out by tab stops ignores alignment and is never justified: see Tab stops.
Line height
rt.manager.setLineHeight(1.2); // a multiple of the font size
Line height is a multiple of the font size: 1.2 makes each line 120% of its size. Each line takes its height from the
largest letters on it, so a bigger word makes only its own line taller. New text made with createDocumentFromText has a
line height of 1.4.
Space after a paragraph
rt.manager.setParagraphSpacing(0.5); // half the font size after each paragraph
Paragraph spacing is the space after a paragraph, as a multiple of that paragraph's font size: 0 is none and 1 is
one font size. It is added below every paragraph except the last one, so it never makes the box taller below the last
line. A soft line break (Shift+Enter) stays inside the paragraph and adds no paragraph spacing. New text has a
paragraph spacing of 0.5.
Letter spacing
rt.manager.setLetterSpacing(2); // 2 pixels after every letter
Letter spacing is extra space after every letter, in pixels. 0 is the font's normal spacing, and a negative value
tightens the letters. The value is a length, not a multiple, so setFontSize doesn't change it; scaleFontSize scales
it along with the letters.
Note: Letter spacing belongs to the paragraph, like alignment. Selecting a few words and setting letter spacing changes the whole paragraphs those words are in. A run of text has no letter spacing of its own: a document that gives a run one has it removed when the document loads.
Inside a scaled Konva group, letter spacing is read and set in pixels as it looks on screen, the same as font sizes.
In the document
Each paragraph keeps these settings in its blockAttributes:
{
"alignment": "center",
"lineHeight": 1.4,
"paragraphSpacing": 0.5,
"letterSpacing": 0
}
FormattingState reports the settings of the paragraph the cursor is in (or of the first
paragraph, for a box that is only selected) as alignment, lineHeight, paragraphSpacing and letterSpacing.
In the API reference
- TextFormatting:
setAlignment,setLineHeight,setParagraphSpacing,setLetterSpacing - BlockAttributes: the paragraph settings in a document
- FormattingState