Text in generated SVGs offset to the left, in one circumstance

#1

Ok, this is an odd one. I have some SVGs generated by a procedure from a JSON configuration string. They seem to be working fine, except, when they’re in the right-hand column of a zig-zag table.

I’m working on a political site for a local party ahead of this year’s municipal elections, similar to what I did two years ago. This is what one page looked like then:

fourwindssoft.com_scott_Tiddlywiki_WIP_DTC_2023_
fourwindssoft.com_scott_Tiddlywiki_WIP_DTC_2023_1144×2651 153 KB

This year, I am not creating these images in an external tool and importing the PNGs to TiddlyWiki. Instead, I’m building them as SVGs inside TW, and planning on exporting the resulting file for the sign-maker. Everything seemed to go fine until I went to display them in a similar page to the above. This time all the text nodes seem to be offset about 300 pixels left, cutting most of it off… but only when the SVG is in the right-hand column!

fourwindssoft.com_scott_Tiddlywiki_WIP_DTC_2025_annotated_
fourwindssoft.com_scott_Tiddlywiki_WIP_DTC_2025_annotated_1144×1649 81.1 KB

When viewed by itself, it looks find:

image
image1196×809 40.3 KB

This seems extremely bizarre. I have no ideas why this happens; I don’t even have a useful way to investigate. (The DOM/CSS inspectors in Brave, Firefox, and Chrome developer tools don’t seem to tell me anything useful.)

This is at http://scott.sauyet.com/Tiddlywiki/WIP/DTC/2025/#Lawn%20Sign. The previous version is at
http://scott.sauyet.com/Tiddlywiki/WIP/DTC/2023/#Lawn%20Sign. In both, you can use (CTRL|CMD)-SHIFT-/ to toggle off read-only mode. These are temporary, I’m afraid. I’ll delete these versions before long, as I don’t want even slightly sensitive political information permanently on the web. But I also don’t have the time to usefully anonymize it. (Update: reduced examples created in place of the old ones.)

The standalone SVG looks fine. I generate it with this call:

<<lawn-sign """{
  "type": "3-name",
  "footer": {"text": "Vote Democratic!", "xOffset": "50"},
  "position": {"text": "Board of Finance", "xOffset": "280"},
  "names": [
    {"name": "Nicholas Clark", "xOffset": "75"},
    {"name": "Robert England", "xOffset": "65"},
    {"name": "Heather Van Cara", "xOffset": "45"}
  ]
}""">>

passing a JSON string into the lawn-sign procedure, which can be found in $:/_/adtc/procedures/lawn-sign.

This is not a critical problem. It’s just an annoyance. But I don’t understand it at all, and would really like to. Does anyone have advice about CSS in SVG or proper generation of SVG in TW that might fix this?

Patterns for working with async JS
#2

Minor update: working on something else, I noticed that the SVG’s xml namespace was missing. The page is updated now to include that, but it made no difference for the current problem.

Update to the update: Well, oddly, that namespace does not seem to make it into the DOM; at least it doesn’t show up in the Dev Tools inspector. But in a harcoded version, it does show up. I clearly know nothing about how TW handles such elements!

#3

For the right aligned TEXT elements you can use text-anchor: end – I can not edit the tiddlers so I can not see the rest of the code.

#4

Thank you. I suppose the smaller white text (e.g. “Board of Finance”) could be right-aligned, although precisely against what I don’t know. The other should all be centered. I will check out text-anchor, though, because that would simplify my generation, where currently, I just play with positioning until it looks centered.

I apologize. You told me about this problem before, and I added to more recent wikis a second keystroke ((CTRL/CMD)-SHIFT-1) to toggle edit mode. But this is an older wiki, and it was only in the last moments while typing this up that I realized that I hadn’t fixed that here. I will try to correct that this evening.

#5 
table.signs tr:nth-child(2n) {
 direction: rtl;
}

I suspect this is impacting the SVGs.

1 Like
#6

Oh, of course. I’m sure that’s it… off to check

…

Yes, that was it. Thank you very much. One of the problems of restarting development after time away is that you forget what tricks you learned and what hacks you left in place. That ltr is a somewhat elegant hack to get the look I wanted, but I really feel it is a hack.

An updated version with an additional

table.signs tr:nth-child(2n) svg {
 direction: ltr;
}

is at

http://scott.sauyet.com/Tiddlywiki/WIP/DTC/2025/fixed/#Lawn%20Sign

I do not plan on leaving this up there long. If I don’t find time to replace it with a more anonymous version, I will take it down by the weekend. (And I apologize. I like these threads to help future visitors, but I don’t want to leave some of that content public any longer than necessary…)(Update: reduced examples created in place of the old ones.)

Thank you very much for your help.

2 Likes