# Problem with cross-browser curved text via Plot **URL:** \ **Category:** Help\ **Created:** [August 13, 2023, 9:44am UTC](https://talk.observablehq.com/t/problem-with-cross-browser-curved-text-via-plot/8183 "2023-08-13T09:44:31Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\ **Post date:** [August 13, 2023, 9:44am UTC](https://talk.observablehq.com/t/problem-with-cross-browser-curved-text-via-plot/8183/1 "2023-08-13T09:44:31Z")
I am trying to create a mark for use with Plot that displayed curved text along a path. This should be possible as SVG supports this natively. However, it would appear that text placement along a path is browser dependent. While I would expect there to be some minor differences in text-metrics across browsers, there appears to be a more significant problem with text anchoring and offset. This results in expected behaviour in Safari (e.g. centred text in the example below), but not in Chrome (offset too far to the right). When setting the anchor to `start` or `end` placement is quite different across browsers so not really useable. ![curvedText](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/a19bd6cb41c6822b1c164d629cdbc1997e2fe78a.jpeg) I am asking here in part because the examples I’ve seen in native SVG seem to work across browsers, and it appears the problem only appears via this Plot mark function. Does anyone know the cause of the problem or a workable solution? Here’s a page with the implementation: > **[Problem with curved text mark](https://observablehq.com/d/1b63355e548aad14)** > > Observable Plot has the ability to create text marks with a variety of styling options, but it cannot display text along curved paths. This function is an attempt to fill that gap, allowing a curved path to be specified with an array of points and... ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [August 13, 2023, 10:51am UTC](https://talk.observablehq.com/t/problem-with-cross-browser-curved-text-via-plot/8183/2 "2023-08-13T10:51:43Z")
Plot injects the following styles into the SVG which affect the placement: ```css .plot-d6a7b5 text, .plot-d6a7b5 tspan { white-space: pre; } ``` If you change your helper to not include additional whitespace around the text then the placement is correct. Some notes: - You probably want `fill="none"` instead of “transparent” - I don’t think “invisible” is a valid value for stroke (I might be wrong) - `xlink:href` should no longer be necessary and can be shortened to `href` - I recommend to create a path ID via `DOM.uid().id` instead of hard coding it ---
**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\ **Post date:** [August 13, 2023, 1:49pm UTC](https://talk.observablehq.com/t/problem-with-cross-browser-curved-text-via-plot/8183/3 "2023-08-13T13:49:32Z")
Thanks on every point there. All helpful, and now behaving consistently across browsers. ---
**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\ **Post date:** [August 15, 2023, 1:04pm UTC](https://talk.observablehq.com/t/problem-with-cross-browser-curved-text-via-plot/8183/4 "2023-08-15T13:04:39Z")
Thanks for the help here and on the other ‘custom SVG functions’ thread. You can find my attempt at a reusable function for adding curved text to Plot specifications here: > **[Curved Text Mark](https://observablehq.com/@jwolondon/curved-text-mark)** > > Observable Plot has the ability to create text marks with a variety of styling options, but it cannot display text along curved paths. This function fills that gap, allowing a curved path to be specified with an array of points and text displayed... ---
**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\ **Post date:** [August 15, 2023, 7:23pm UTC](https://talk.observablehq.com/t/problem-with-cross-browser-curved-text-via-plot/8183/5 "2023-08-15T19:23:21Z")
Fantastic! I suggest adding a control on [dominant-baseline](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline). ---
**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\ **Post date:** [August 15, 2023, 7:43pm UTC](https://talk.observablehq.com/t/problem-with-cross-browser-curved-text-via-plot/8183/6 "2023-08-15T19:43:29Z")
Good suggestion, thanks!. Now added 🙂 ---
**Author:** ![erdirstats](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/erdirstats/32/7607_2.png) [@erdirstats](https://talk.observablehq.com/u/erdirstats)\ **Post date:** [August 15, 2023, 9:40pm UTC](https://talk.observablehq.com/t/problem-with-cross-browser-curved-text-via-plot/8183/7 "2023-08-15T21:40:51Z")
This is so nice! Already in use 😃 https://observablehq.com/embed/e89e69a327e760fb?cells=plot2 ---
**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\ **Post date:** [August 15, 2023, 10:02pm UTC](https://talk.observablehq.com/t/problem-with-cross-browser-curved-text-via-plot/8183/8 "2023-08-15T22:02:54Z")
@erdirstats is absorbing and utilizing material quickly!! 🚀