10-31-2019 08:08
10-31-2019 08:08
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;
}
10-31-2019 08:10
10-31-2019 08:10
In case it wasn't clear, this is for a clock face.
10-31-2019 18:06
10-31-2019 18:06
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 |
11-01-2019 08:11
11-01-2019 08:11
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.