How to maintain letter spacing when breaking a text element?
Another question. I'm trying to position an inline-block inside a text element, but clearly if I do
<span>abc<div class="inline-block"/>efg</span> the standard letter spacing disappears and the inline div is flush to the left side of the 'e', and the right side of the 'c'. Is there a way to keep the spacing consistent and avoid manually adding arbitrary pixel margins to the inline block?
I can create a variable and manually set both the letter-spacing on the <span> and the margin on the <div> to the same value, but I was wondering if there are better/other ways of doing it?35 Replies
you're putting a non-permitted block-level element inside a
<span>
you can just use an inline-block span
then use margins or paddings set to the letter spacing
or just try a span
without anythingI thought that in this case since either has to be explicitly set to inline-block it doesn't matter whether it's a div or a span?
it shouldn't, but it isn't a permitted element
doesn't work as I need to change its height/width
what exactly are you trying to do?
yeah, was hoping to avoid magical numbers
css variables exist
do some typography shenanigans
what do you have so far?
now, can you take it and shove into a codepen or jsfiddle?
probably better with some :before and :after
but im bad at those
yeah sure, gimme 1s
thank you
and what's the problem?
the space between the T E R is different?
(changed it so that the whole thing is a flex as intended)
that it's terribly ugly
and I'd like to not have stuff like this
if possible
I understand that what I'm doing is not the pinnacle of proper html regardless but
if I could avoid this it would be great
how about you have
margin: 0 var(--letter-spacing)?
then you won't have to worry about anything
then you can set the value in the h1awesome, seems to work
🙏
if i were you, i would actually use em values
by the way, you should have an
E that is visually hiddenye makes sense
otherwise, it will be read as VINTR by google
you can set the
E to 0 font size and the color set to transparent
oh, and set aria-label="vinter" to the h1
otherwise, some screen reader may read it as "V I N T E R"
(i'm not saying it will, but i wouldn't be surprised if something misbehaved)well, kinda works
the spacing is a bit funky compared to the normal one but
ehh
good enough
I am, aren't I?
oh for the margins you meant
you're using sub-pixel rendering
yeah idk 13px was nicer than 0.167em
or w/e it was :p
yeah, but px is bad for text
but ye I guess the var is good enough
but you have those issues because of this
sub-pixel rendering will give you funky funky stuff
is there a way to prevent that?
make sure all values are integer pixels
but in essence, not exactly
since you need to use
em or rem for texts, due to accessibility issues, then it is very ... touchyyeah I figured
well, I'll live with it
thanks!
you're welcome