Ideas on how to position input placeholder
I'm trying to position this input placeholder centered vertically but I can't get it centered. The only thing that fixes it is removing the Franklin Gothic font I have on it. Is this just an issue of with the font face and nothing I can do about it?
I've tried removing all properties on it already and nothing works
37 Replies
It is centered vertically. But some letters go below the bottom baseline such as "g" so it needs to create extra space for this below the text baseline,
And same goes for the top.
You can see here from these lines
You don't have any letter in your placeholder text that goes below the baseline, therefore it appears to not be centered
You can try with
text-box: trim-both cap alphabetic; that should remove this space on bottom
just keep in mind that this is an experimental feature, so it has bad browser support
Thank you! let me try that :)
For better browser support you can use this
https://text-crop.eightshapes.com/
nah it's not even the text baseline it's just off centered; I tried the text-trim you suggested but it didn't work; I think I'm just going to use a smaller padding-bottom since that's working
ty though :)
Actually tried a separate padding-bottom and it works fine in FF but not in Chrome (because of the way the browsers render font differently) so back at square one š
Can't use the text-crop solution because I'm working with a team and we have specific font sizes setup
did you set the line-height to 1?
Any chance of a Codepen? It does seem rather strange
Ye
I dont think I can upload custom fonts to codepen, I'll try to see if I can get something spun up in the next few hours
Probably on codesandbox
you dont need to, with data urls
I can't get the font to load locally š
Am I being stupid here?
do you have python or php installed?
Ye
then run a web server with one of those
with php is just
php -S
with python is more annoying and you have to read it because i dont rememberIs it the same as live server extension? Just making a localhost server
not quite
you need to send a specific content-type for the font to load
and not all servers support all types
I've never had to do that for localhost stuff til now I thought
i have no idea how that extension works, but, it's always better to eliminate variables
I'll revisit this my head hurts xD
been looking at this š© all day
usually, what i do is to just make the font bigger
even w/ the font size bigger it's wildly off center šØ
I can't help thinking that there must be something else effecting this. Have you checked the computed values to see if there is anything strange going on?
read this: https://discord.com/channels/436251713830125568/1352420783070384169
it's the space under the baseline
The reason I mention is because I did a test with FranklinGothic and didn't have this issue. (I realize that it may depend on the actual version of the font as, despite having the same name, not all fonts are the same).
Ah okay I'm dumb I got the font to load locally, it's literally still like this:
Maybe the font file they gave me is f*cked?
I have actually nothing on it other than padding
(sorry I couldn't get a codepen or codesandbox up, I tried but it wasn't loading the font)
Yea, I just grabbed a random Franklin Gothic Book file from the internet and now the extra spacing is gone
the font is fucked, yeah
look at the l and the d
and the o
they are at different positions
Yea wtf, every glyph is just messed up
It's like distorted / stretched
yup, at the tiny size you shared it wasn't visible
it's a bit visible here, but just on the "r"
super easy to miss
I can't mark this as solved for some reason lol @mod š
Oh cause they archived this
damn I been through 2 archives i feel like b1 now
šµ
haha, I didn't expect the "create post" permission to also mean you couldn't then add tags... ah well, it's only gonna be a week before we lock the entire old set of forums, I'll mark it as solved now