Baseline alignment

Question

When using multiple text views with different font sizes it would be nice to align the text views with a base line.
Is this possible with EmWi?

Example from CSS:

Align the baseline of the element with the baseline of the parent element. 
<style type="text/css"> 
 .baseline {vertical-align: baseline;}
</style> 

Answer 1

Approach 1:

You can calculate the displacement for one text view to appear base-line aligned to another text view. For this purpose use the metrics of the fonts associated to both text views. For example if you want the text to appear centered vertically:

Step 1: Arrange two text views side by side. Ensure that both views have the same height.

Step 2: From the font metrics calculate a displacement value:

var int32 ofs = ( Text1.Font.Ascent - Text1.Font.Descent -
                  Text2.Font.Ascent + Text2.Font.Descent ) / 2;

Step 3:  Use the calculated value to scroll the text within the second text view. You can assign the value to the view's property ScrollOffset:

Text2.ScrollOffset.y = ofs;

Hint: When you put the above code fragments into a slot method and assign this slot method to the property OnUpdate of the first text view, the arrangement will occure automatically even when the first text view is moved or the font used by it is changed dynamically at the runtime.

Approach 2:

Use the 'attributed text view'. With this view you can render complex text similarly to HTML. The attributed text view will automatically arrange the glyphs within a row on a common base-line. For more information please see View::AttrText in 'Mosaic 2.0 User Manual' and the example 'HelpViewer'.