lcars-title class should have character glyphs same height as parent bar element, visually

[jrwarwick]

Currently, the lcars-title class (that is seen in the solid horizontal bar with embedded text) shows the text's character glyphs with a little bit of empty space above and below the top and bottom of the bar's height. Instead, the text should visually have characters exactly the same height as the parent bar element.

My first pass at this is to add these two rules to the lcars-title class:

line-height: 1.64rem;
font-size: 2.05rem;

But I fear there may be some more subtlety and complication to this. At least as far as being font-dependent. This may be an issue where some stylus mixins/functions/etc and good documentation along with decent defaults will be particularly valuable.

[jrwarwick]

[xenziffen]

In my fork I changed the display to flex on that title element and then centered the text both directions

justify-content: center
align-items: center

That is consistent with how the lcars-elements handle font adjustments and I think it gives the results you are trying for, without stressing about being exactly as high as the horizontal bar

[xenziffen]

Although you are right. Having the height match exactly is a nice effect.
Can Stylus set a CSS value that forces the uppercase style to have the same height as the other 'bar-height' items?

[jrwarwick]

I'm pretty new to Stylus, and not-quite-advanced in CSS stuff, caveat et cetera. Stylus does have some functions and variables type of features, but ultimately you compile it to static CSS. So whatever challenges and limitations we have there, we'll more-or-less be up against.

So I think my answer to your question would be something like: probably yes, and we should try it, but there may be other complications; such as: no guarantee end user didn't switch to a different font that has different proportions that completely blows all of our clever calculations out of the water.

Although even that can probably be mitigated via Stylus by having some kind of nice set of easily tweakable variables like fontProportion and fontHeadSpace which would require a Stylus recompile, yet much less work than otherwise.

I do like your flex and center approach, though. I think that would be a good plan B or in-combination change.

[xenziffen]

I read a deep-dive blog on controlling font height, and the practical answer is 'no, CSS does not have that level of font control'.

Ideas for if this had to happen would be tables of font-sizes for targeted platforms and tested font configurations. If you were trying to do it for an environment you control, like say a kiosk, that would be one thing. But creating a generalized font-height solution seems next to impossible.

[Fr4nk1973]

Hello Xenziffen,

can you post the code from your Lcars for Example?

[xenziffen]

I have a fork with my changes. https://github.com/xenziffen/lcars I tried doing pull requests at first, but I haven't been active enough to coordinate getting the features I wanted to build out into this source. There's plenty of differences now, especially in audio and the elbow elements.

…

On Wed, Sep 30, 2020, 17:07 Fr4nk1973 ***@***.***> wrote: Hello Xenziffen, can you post the code from your Lcars for Example? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#38 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AG3PFBZY3QQWEMESSXBWA5LSIPB45ANCNFSM4K3N6BKQ> .