search

Deep-Symmetry / bytefield-svg

Node module that generates byte field diagrams in SVG format
Eclipse Public License 2.0
121 stars 18 forks source link

Support rotation of box labels #15

Closed lorrden closed 4 years ago

lorrden commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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