How to align the bottom of text naturally?

[jeaye]

Firstly, thanks for this very neat lib. I'm trying to use it to procedurally generate benchmarking charts for jank, a Clojure dialect on LLVM.

It looks like dali aligns the bottom of text based on the pixel, rather than where that text would sit on a line. This is made clear by introducing a y into some text. dali will shift up the position of the whole text, rather than letting the tail of the y sit "below the line".

Minimal example

[:dali/page {:font-size 15}
 [:dali/stack {:id :text-stack
               :position [20 20]
               :direction :right
               :gap 10}
  [:dali/align {:axis :bottom}
   [:rect {:fill :none} :_ [50 20]]
   [:text {} "Initial"]]
  [:dali/align {:axis :bottom}
   [:rect {:fill :none} :_ [50 20]]
   [:text {} "Initially"]]]

 [:dali/place {:relative-to [:text-stack :bottom]}
  [:line {:stroke :black}
   [0 0]
   [150 0]]]]

Real world issue

This becomes an eye sore when I'm trying to generate bar charts, since not all of them are aligned (see "Initial" and "Tagged" below -- because of the "g").

[jeaye]

Looks like I can kind of fudge this by centering the text on the rect, within the align layout. Like so:

[:dali/page {:font-size 15}
 [:dali/stack {:id :text-stack
               :position [20 20]
               :direction :right
               :gap 10}
  [:dali/align {:axis :center}
   [:rect {:fill :none} :_ [50 20]]
   [:text {} "Initial"]]
  [:dali/align {:axis :center}
   [:rect {:fill :none} :_ [50 20]]
   [:text {} "Initially"]]]

 [:dali/place {:relative-to [:text-stack :bottom]
               :offset [0 -5]}
  [:line {:stroke :black}
   [0 0]
   [150 0]]]]

It looks better, but still not fully aligned. Plus, I need to fudge the line underneath it up, and how much it's fudged is based on the contents of the text.

Fortunately, in my real world example, I don't have an underline and the centering can work. The text is ever so slightly misaligned, but it doesn't affect the start of the bars.

[marrs]

@jeaye Did you find a solution to this? How did you generate your benchmark graphs in the end?

[jeaye]

I left it as I explained in my last comment: centered text in a rect.

However, I spoke with Timothy Pratley about this problem at the Conj last year. He suggested to use the <foreignObject> SVG node, which allows one to embed HTML within an SVG. This would allow you to rely on the browser + CSS to handle text for you. I haven't tried it yet, but it looked compelling.