Why is a TextNode in the dom 20 px high when its set to 1rem/16px?
Hello people! I recognized that pure TextNodes in the dom have a box size of 20px height. See the first screenshot.
The box of the text grows larger than its content. This causes my button to look not appealing, as even though I have set it to flex and centered it vertically, it still looks like the text is a few pixels too near to the bottom line.
And then there is another thing: When zooming in, the actual center line changes. See the second screenshot.
I know this is probably caused by how images are rendered by the browser and that such a rendering process is a very complex thing and nearly impossible to do it perfect. But is there anything I can do about that?
Especially about that the image and the text dont look centered. Look closely and you can see that the bottom line of the TextNode box aligns with the bottom of the image. Ironically other buttons texts align with the top. But they all have the same css rules applied. See third image.
I cant live with this inconsistency, please help.
41 Replies
Maybe the line-height has something to do with it as well.
Since it can accept just plain numbers as a multiplier, try to set it to 1.
Its set to 1 already
can you show the computed styles?
Which exactly?
all
there shouldnt be that many
Probably best if you share the code through codepen so that we see the issue easily
I mean of which element? The surrounding button? And they're many
whatever element has the text
Bumping because I have pretty much the same problem again xd
you still havent shared a minimal reproducible example of your issur
Sorry :D
Wait!
https://svelte.dev/repl/f0684183a75f4d139ac7f60affb63a7c?version=4.2.10 For some reason it is better aligned in the reproduction... I cant reproduce it perfectly...
alignment issues • REPL • Svelte
Cybernetically enhanced web apps
with
line-height: 1 it's 16px tall
The difference is likely the font-family, a lot of fonts are a bit wonky when it comes to alignment and sizes so sometimes you need to compensateOh, I didnt consider the font family at all.
I "kind of" fixed it by adding
transform: translateY(50%) which is kinda hacky, but it worksYeah the font family issue isn't super intuitive but you'll run into it a lot as you work with more fonts.
There might be a better solution but I haven't really looked into it, I only really tend to have the issue on buttons which I just adjust padding on since every button would normally have the same font anyway.
Fonts also include space on the top and bottom for things like accents and decenders, so font-size will never equal the height.
They are working on some things that will allow you to trim off that empty space, but it's likely at least a year away, if not more, based on what I've heard.
I think line-height: 1cap should take care of that
It's still super inconsistent, sadly.
The joy of line-height being from the vertical middle of the "paint" area of a font, so it ends up being the cap height, but in this case, slightly offset down because of how the font uses it's space. Other fonts could be the opposite of this, and for a lot, it'll work pretty well.
The new controls we'll eventually get will "trim" off where we tell it to, so we can say the cap, or the ex, or whatever the accent space is called, and also have the same control on the bottom, for baseline, descender, and that type of thing.
I'm not sure if I included that bit with my interview with Jen Simmons because we talked about it for like 20min 😅, but I sat in on one of the working group discussions about the new spec last year, and it was complicated then, and since then they've realized there are even bigger consequences to what they're trying to do... so they want to make sure to do it properly, meaning it's dragging out a lot. Luckily,
margin-trim was separated and shipped, since originally it was going to be part of the same proposal.this might sound incredibly stupid, but, why don't you use svg?
it can center the text based on it's actual size, and you can make the text fit whatever space you need as well
If the font is known you can also just translate it, and use
em, it is magic numbery but 🤷♀️i prefer the svg option
but that works too
svg for what?
for this
thats an <image> and a <text> element
if you're extra smart, it's actually a <symbol> and a <text>
once you need to replace all the logos because, say, twitter changed its logo to a single character, you can just replace in a single place and be done
You mean I should use an inline svg?
Instead of a loaded one?
im saying that you should try using an svg for that
instead of trying to mess with font sizes and stuff
Oh you mean the entire text should be included in the svg?
no, a new inline svg
or, make a new svg and include it as a symbol
The test should be svg?
That sounds inaccessible
its text
if you do it inline, it behaves kinda like a span
If you're never using that font anywhere else on the website it probably should be an SVG as why enqueue an entire font for that (As you would with most logos, add the text via
alt attribute)
If you're using that font for multiple different things there's not much point adding a whole svg to solve the issue once when you need to solve it dynamically across a lot of elements"a whole svg" you make it sound like an svg is massive and cumbersome to use
A "whole svg" isn't massive or resource intensive but it is cumbersome in the situation I mentioned.
Say you want to edit how the font displays slightly, instead of adding 1 line of css adjusting e.g letting spacing or colour to all instances across the website you now have to export the svg, edit it externally, import it back, do the same thing for all the other ones you've added
There's just not much point.
A unnecessary font file however I would be happy to remove from a website so if it's used very rarely I would lean toward SVG
you know that you can make it inherit the parent font, right?
i would be extremely surprised if it didnt inherit the font already
An svg would probably work in this case. But I have other issues with font alignment that dont involve svgs
if you're trying to make everything pixel perfect, that's going to be an uphill battle that never ends
The best you can do is scale everything 10x, find the correct shift in
em lh ex cap etc, so that it is unquestionably perfect, it minimises the error, and scale it back down. If it still doesn't look correct, you've tried, text is difficult. If you're using it for branding, which you are you should just use an SVG.
I'm aware from what I can see that you have this as a list to social networks and related sites and so the following isn't necessarily useful for this circumstance but might also be worth knowing:
It's always worth looking at how brands want you to use their logos. You're trying to link to Amazon you can go to their brand guidelines and you can't use "amazon" but you can use "available at amazon". Their guidelines say that they would prefer you to use the "available at" logo unless the text is too small, and you're at 16px so that would be allowed to still use text, but if you could go bigger (such as if this was a product page), it might be worth using thatSVG editing is just code too fyi ... So Darrylls point of it being a "task" is kinda moot. To edit<text> you would just open in the editor and change it like any html element
Also a sprite so you could just repeat with <use> just depends on the needs.
^ and with ... i cant spell the name's suggestion of using the assets provided by amazon, you should have even fewer problems and actually should consider the symbol-use route
Can't spell my name?
z-oh, just that?
yeah, i will remember that