Baseline alignment

asked Mar 9, 2016 in GUI Development by rleberfinger

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;}

1 Answer

0 votes
answered Mar 15, 2016 by Paul Banach

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'.

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint