side

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The side attribute determines the side of a path the text is placed on (relative to the path direction).

You can use this attribute with the following SVG elements:

<textPath>

Example

html, body, svg { height: 100%; } text { font: 25px "Helvetica", "Arial", sans-serif; }

html

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <text> <textPath href="#circle1" side="left">Text left from the path</textPath> </text> <text> <textPath href="#circle2" side="right">Text right from the path</textPath> </text> <circle id="circle1" cx="100" cy="100" r="70" fill="transparent" stroke="silver" /> <circle id="circle2" cx="320" cy="100" r="70" fill="transparent" stroke="silver" /> </svg>

Usage notes

Value	`left` \| `right`
Default value	`left`
Animatable	Yes

left: This value places the text on the left side of the path (relative to the path direction).
right: This value places the text on the right side of the path (relative to the path direction). This effectively reverses the path direction.

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # TextPathElementSideAttribute

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Oct 13, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content