Vertically Center <text> Element

[pappyvanstinkle]

I must be missing something and would appreciate if anyone knows how to do this.  I've shared my index and styles files below.  My goal is simply to center the text element vertically on the screen without having to eyeball it.  I set the x and y positions to 50%, set the text-anchor to middle, and get what I would expect - text with it's baseline on the vertical center of the screen.  I recognize that I can adjust the position further using something like "50%+somePixelAmount", but what is the correct adjustment amount?  From my tests, using half the font size doesn't seem sufficient.

Thanks in advance for the tips!

index.gui

<svg id="background">
  <text id="time" />
</svg>

Here is my styles.css:

#background {
  viewport-fill: fb-white;
}

#time {
  font-size: 80;
  font-family: System-Bold;
  text-length: 32;
  text-anchor: middle;
  x: 50%;
  y: 50%;
  fill: fb-black;
}

[pappyvanstinkle]

In case it wasn't clear, this is for a clock face.

[morningReign]

Hello @pappyvanstinkle ,

Interesting question; I ran into this early on while doing much the same thing. Normally you can set where the baseline of text is or you can offset the y position by em's or ex's (basically the height of an 'M' or and 'x' in your font). Asking for this level of control in a device this small is probably asking too much and neither of these solutions will work. Frankly, I'm a bit amazed how much they actually did implement.

My solution was to plot a temporary grid, then tweak the text position until I got the aesthetic I was looking for. 

A font pitch vs font height is extremely useful when doing this kind of formatting. An example follows; many examples exist on line.

Regards,

Reign

Point Pixel Em Percent Keyword Default sans-serif

6pt	8px	0.5em	50%		Sample
7pt	9px	0.55em	55%		Sample
7.5pt	10px	0.625em	62.5%	x-small	Sample
8pt	11px	0.7em	70%		Sample
9pt	12px	0.75em	75%		Sample
10pt	13px	0.8em	80%	small	Sample
10.5pt	14px	0.875em	87.5%		Sample
11pt	15px	0.95em	95%		Sample
12pt	16px	1em	100%	medium	Sample
13pt	17px	1.05em	105%		Sample
13.5pt	18px	1.125em	112.5%	large	Sample
14pt	19px	1.2em	120%		Sample
14.5pt	20px	1.25em	125%		Sample
15pt	21px	1.3em	130%		Sample
16pt	22px	1.4em	140%		Sample
17pt	23px	1.45em	145%		Sample
18pt	24px	1.5em	150%	x-large	Sample
20pt	26px	1.6em	160%		Sample
22pt	29px	1.8em	180%		Sample
24pt	32px	2em	200%	xx-large	Sample
26pt	35px	2.2em	220%		Sample
27pt	36px	2.25em	225%		Sample
28pt	37px	2.3em	230%		Sample
29pt	38px	2.35em	235%		Sample
30pt	40px	2.45em	245%		Sample
32pt	42px	2.55em	255%		Sample
34pt	45px	2.75em	275%		Sample
36pt	48px	3em	300%		Sample

[pappyvanstinkle]

Thanks for sharing the info Reign, that's helpful to know how you've approached it.  Perhaps it's as you said and it's a matter of the device capabilities.  I'd have thought doing things like masking and animating gradients would be more costly than aligning text, but then again vertical text alignment is always an adventure.