Support rotation of box labels

[lorrden]

When printing labels for shorter boxes, the text often do not fit.
It would be nice if we could rotate the labels in the. boxes in these cases (combined with increasing the row height).

[brunchboy]

All right, to celebrate finally getting beat-link-trigger 0.6.2 released today, I spent a little time poking at this. We can, indeed, do it with SVG transforms, but unfortunately it’s going to take some enhancements to bytefield-svg itself to make it work. My original hope was that we could simply use the existing release and add a rotation to the text element, like so:

  (draw-box (text "Label" {:transform "rotate(-90)"}))

Unfortunately, while that does indeed rotate the text, it rotates it around the origin of the diagram, not the center of the text. And only the code inside bytefield-svg knows what the coordinates of the center of the text are.

So, this will be possible with some more code. Will you be able to test trial implementations by installing bytefield-svg from source? I’d like to make sure it is working for you before publishing another release.

[brunchboy]

On my way to bed I remembered that I built in an escape hatch that we can use with the current release! The draw-box function can take a function to be used to draw the label, and it calls that function with the location and dimensions of the box. So that function can emit a proper SVG transform to rotate the text, and then draw it: https://bytefield-svg.deepsymmetry.org/bytefield-svg/1.4.1/funcs.html#draw-box

[brunchboy]

@lorrden you can rotate your labels today by setting the CSS attribute writing-mode to "vertical-rl":

(draw-box (text "Label" {:writing-mode "vertical-rl"}))

This, combined with setting row-height appropriately might get you started with something halfway decent. If you want to fine-tune the positioning, or the direction of rotation, then one of us can try a custom label rendering function as described in my previous comment.

[lorrden]

This works quite well. I think this is enough to kill-off packetdiag in our case. I find the bytefield-svg (though we mostly use it for bitfield diagrams) absolutely awsome!

[brunchboy]

Thank you! I’m delighted to hear that. I will add an example of doing this to the user guide since I am sure you will not be the only person who will want something like this.

[brunchboy]

And thanks again for the idea, @lorrden. I have updated the user guide to include an explanation of how to do this. It has some additional refinements that might be interesting to you. Also, if you have a diagram that would be a better illustration, and are willing to contribute the source, I would be happy to feature it and link to your project.

https://bytefield-svg.deepsymmetry.org/bytefield-svg/funcs.html#draw-vertical-text