Summary

XAML has two properties which control the bounding region and layout of each line of text: TextLineBounds and LineStackingStrategy.

Both of these properties should be exposed as React props on the <Text /> element to enable fine-tuning of text layout, such as when vertically centering text within a button. The default XAML values are extremely problematic.

Motivation

By default, XAML uses a TextLineBounds of Full, meaning that the bounding box includes ascenders and descenders. The height of ascenders/descenders relative to the font baseline can vary by font, and a run of text may or may not have ascenders or descenders. The result is that the position of the baseline relative to the bounding box can vary significantly and this makes it impossible to consistently positioning the line of text relative to other elements. Vertically positioning text within a button, for example, is an exercise in frustration as any change to the text or font can shift it up or down.

This article goes into detail about the same problem on web, which currently lacks the knobs XAML provides. It describes an active proposal to add new CSS properties like leading-trim to address the problem.

XAML has this functionality already available (set TextLineBounds="Tight"), we just need to expose it through React.

As for LineStackingStrategy... it normally defaults to MaxHeight, but RNW recently (as of 0.65) changed this to BlockLineHeight because of MaxHeight's poor handling of small line heights. This change has the side-effect of making multi-line text much more consistent (it will simply obey line height instead of shifting around based on the content). However, there may be cases where the other available values (MaxHeight and BaselineToBaseline) are useful. I suggest exposing it as well.

Basic Example

No response

Open Questions

Should this be exposed as an RNW-specific prop or should it align with the CSS leading-trim spec?