v156 · textPath side · practical + migration

Label both sides

A lake wants two labels: the water's name inside the shoreline, the trail's name outside it. Before side, the inside label needed a duplicated, hand-reversed copy of the shoreline path — double the path data, double the maintenance. Toggle between that working hack and the side="right" version that reuses the single original path.

One shoreline, two labels

Inside label implemented with
A lake outline labelled on the outside by a trail name and on the inside by the lake name GRAVEL·SHORE·TRAIL·4.2·KM LAKE·VÄTTERN

The old way — reversed duplicate

<path id="shore"
  d="M 210,130 m -150,0
     a 150,85 0 1,1  300,0
     a 150,85 0 1,1 -300,0"/>
<!-- same geometry, direction
     reversed BY HAND: -->
<path id="shore-reversed"
  d="M 210,130 m -150,0
     a 150,85 0 1,0  300,0
     a 150,85 0 1,0 -300,0"/>

<textPath href="#shore">trail</textPath>
<textPath href="#shore-reversed">
  lake</textPath>

SVG 2 — one path, side="right"

<path id="shore"
  d="M 210,130 m -150,0
     a 150,85 0 1,1  300,0
     a 150,85 0 1,1 -300,0"/>



<textPath href="#shore">trail</textPath>
<textPath href="#shore"
          side="right">
  lake</textPath>

The reversed-duplicate trick is not just ugly: every edit to the shoreline must be mirrored into the reversed copy, arc sweep flags and all, or the labels drift apart. side="right" is defined as exactly that reversal, computed by the renderer from the single source of truth.

see also