Comments (6)
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.
from bytefield-svg.
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
from bytefield-svg.
@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.
from bytefield-svg.
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!
from bytefield-svg.
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.
from bytefield-svg.
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
from bytefield-svg.
Related Issues (20)
- Consider an option to set the viewport HOT 2
- Add support for bit fields HOT 5
- Pull in some useful functions from other namespaces
- Omit XML processing structures for generating HTML embedded SVG
- Declare the namespaces in the <svg> HOT 8
- defattrs should call eval-attribute-spec
- Long boxes HOT 11
- Variable row height HOT 17
- Add more examples HOT 3
- Set svg background HOT 4
- Allow custom box drawing
- Allow boxes-per-row > 16 HOT 4
- draw-line should take an attr-spec HOT 1
- CLI Error - Could Not Resolve Symbol: Address HOT 2
- Box borders should be more flexible HOT 1
- draw-box should auto advance rows
- Have draw-gap handle labels and finishing previous row
- Small/vertical draw-gap function HOT 10
- Support padding to a particular address
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bytefield-svg.