v156 · svg · text
SVG textPath side attribute
Text on a path always ran along the path's left side — the side the path direction puts it on. To label the other side of a circle, a road, or a coastline you had to duplicate the path data and reverse it by hand. SVG 2's side="right" attribute on <textPath> flips the text to the opposite side of the same path, which is what finally makes "label the inside and the outside" a one-attribute job.
concepts
-
Inside / outside
The canonical case from the spec: a circular badge where
sidedecides whether the caption runs around the outside or the inside of the ring. Toggle it live, and a rendering-based probe measures the real glyph positions — the only honest way to detect this attribute. -
Side lab
The inspection bench: choose a closed circle, an open arc or a wave; drive
side,startOffsetandtext-anchortogether; and read measured character positions back. Includes the open-path edge case, whereside="right"effectively reverses the path and text sets off from the other end. -
Label both sides
The practical job and the migration: a lake shore labelled on the water side and the land side. The old way — a duplicated, hand-reversed copy of the path data — runs beside
side="right"on the single original path, and the page diffs the markup so you can see what the attribute deletes. -
Orbit ticker
The composition: a ticker orbiting a ring via animated
startOffset(runs everywhere), withsideflipping the orbit between the outside and the inside lane. SVG 2 markssideanimatable, and the demo drives both attributes together.
why it shipped
The SVG Working Group added side in SVG 2 (resolved at the Sydney 2015 meeting) precisely for closed subpaths and basic shapes: circles, ellipses and rectangles whose interior and exterior both want labels. Specifying right is defined as equivalent to reversing the path direction before laying out the text — so everything else about text-on-a-path (offsets, anchoring, spacing, the wrapping rules for closed subpaths) keeps working, just mirrored to the other side.
Firefox has shipped side for years; Chrome 156 closes the gap. Until your Chrome has it, the demos here degrade honestly: the rendering probe measures whether the attribute moved any glyphs, and when it did not, the pages say so and show the hand-reversed fallback pattern instead — they never fake the flip.
research record — use cases & exact surface
- Exact surface (SVG 2, Text chapter):
side = left | righton<textPath>; initialleft; animatable yes;right"effectively reverses the path". Layout algorithm reference: "if the ‘side’ attribute … is 'right', then reverse path" in the text-on-path layout rules, before offset/advance placement. - No IDL reflection:
SVGTextPathElementexposes nosidemember, so feature detection must be rendering-based — the demos comparegetStartPositionOfChar()between two textPaths differing only inside. - Runtime flag:
SVGTextPathSideAttributeinruntime_enabled_features.json5(statusexperimentalon trunk; shipping milestone 156 per ChromeStatus). Enable early with--enable-blink-features=SVGTextPathSideAttributeor--enable-experimental-web-platform-features. Cross-check today in Firefox, which already ships it. - Use-case portfolio: canonical inside/outside toggle, inspection lab with the open-path/startOffset edge cases, the practical both-sides labelling job with the hand-reversed-path migration comparison, and the animated orbit composition. All four applicable angles built; a separate configuration-only angle is folded into the side-lab since
sidehas exactly two values and its interesting configuration is the interplay withstartOffset/text-anchor, per the spec's layout rules.