A tab stop is a position across a paragraph where the text after a tab ends. Set one at the right edge, and every price in a menu lines up there, whatever the length of the dish's name. A leader fills the gap before the price with dots or a solid line.
Set tab stops
// Each line of the menu is "Tomato soup\t$6": a tab before the price
// Konva: const rt = enableRichText(stage)
rt.manager.setTabStops([{ pos: 1, align: "right", leader: "dots" }]);
rt.manager.setTabStops([]); // remove them
// Plain canvas: const rt = createCanvasRichText({ onChange: render })
rt.setTabStops([{ pos: 1, align: "right", leader: "dots" }]);
rt.setTabStops([]); // remove them
setTabStops replaces the stops of the paragraphs it reaches: every paragraph of a box that is only selected, every
paragraph the selection touches while editing, or the paragraph the cursor is in. To change boxes you name instead,
pass them as the optional last argument: rt.manager.setTabStops(stops, [prices]). Each call is one undo step.
Each stop has three fields:
| Field | What it does |
|---|---|
pos |
Where the stop is, as a fraction of the box's width from its left edge. 1 is the right edge and 0.5 the middle. |
align |
How the text after the tab sits against the stop. Only "right" is laid out today; see the limit below. |
leader |
What fills the gap before the text on the stop: "dots", "rule" (a solid line), or leave it out for an empty gap. |
The first tab in a line goes to the first stop, the second tab to the second stop, and so on. A row with three columns, "Coffee⇥Small⇥$4", uses two stops:
rt.manager.setTabStops([
{ pos: 0.7, align: "right" },
{ pos: 1, align: "right", leader: "dots" },
]);
Limit: Only right-aligned stops are laid out today.
align: "left"andalign: "center"are accepted and saved, so a document that uses them still opens, but those stops are laid out as right stops: the text after the tab ends at the stop.
Type a tab
While a box is being edited, the Tab key types a tab. Enter keeps the paragraph's tab stops, so a new menu row lines up
as soon as it is typed. Shift+Tab, and Tab with Ctrl, Cmd or Alt, are left to the page. Esc ends editing, and Tab then
moves on through the page as usual. To use the Tab key for something else while editing, handle the key before the
library does, with a keydown listener on the document in the capture phase.
A tab can also arrive in pasted text or in a document you load: it is the character \t in a run's text.
Where a tab goes
- A paragraph with stops: the text after each tab ends at its stop.
- A paragraph with no stops: a tab goes to the next default stop. Default stops are every 3 times the font size from the start of the line, as in word processors, and the text after the tab starts there.
- A tab past a paragraph's last stop takes no room. A second Tab on a menu row with one stop changes nothing.
A line laid out by its stops ignores the paragraph's alignment and is never justified. A line in the same paragraph with no tab, such as a description below the dish on a soft line break, still follows the alignment.
A long label wraps beneath itself
Each tab stop keeps a column clear for the text parked on it. The text before the tab wraps short of that column, leaving a gap of 0.75 times the font size, so a long dish name wraps onto a second line under itself and the price stays on the first line at the right edge. The text after a soft line break (Shift+Enter) gets the full width again.
Leaders
A leader is drawn in the text's color, or with the box's gradient or image fill when it has one. Dots sit on a grid measured from the left edge of the box, so the dots of one row line up with the dots of the rows above and below. A leader is drawn only where the text before the tab and the text after it are on the same line.
Older text
A document records the text version it was made with, and older text keeps the layout it was designed with (see JSON documents). In text version 1, the version before default stops:
- A tab in a paragraph with no stops is drawn as the character it is, with its own width.
- A tab past the last stop goes to the next quarter of the box's width, with the text after it ending there.
- The column a stop keeps clear reaches to the right edge of the box, whatever the stop's position.
- A justified line with a tab is justified like any other line.
New documents use the latest version.
Show the current stops
FormattingState reports tabStops, the stops of the paragraph the cursor is in. The list is
empty when the paragraph has none.