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

Vvince I'm trying to position this input placeholder centered vertically but I can't ge...

Tok124 (CSS Nerd)•4/1/25, 2:54 PM

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.

Tok124 (CSS Nerd)•4/1/25, 2:57 PM

You can see here from these lines

Tok124 (CSS Nerd)•4/1/25, 2:58 PM

You don't have any letter in your placeholder text that goes below the baseline, therefore it appears to not be centered

Tok124 (CSS Nerd)•4/1/25, 3:03 PM

You can try with that should remove this space on bottom

Tok124 (CSS Nerd)•4/1/25, 3:04 PM

just keep in mind that this is an experimental feature, so it has bad browser support

vinceOP•4/1/25, 3:05 PM

Thank you! let me try that :)

Vvince Thank you! let me try that :)

Tok124 (CSS Nerd)•4/1/25, 3:05 PM

For better browser support you can use this

https://text-crop.eightshapes.com/

vinceOP•4/1/25, 3:38 PM

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

vinceOP•4/1/25, 3:41 PM

ty though :)

vinceOP•4/1/25, 4:03 PM

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

vinceOP•4/1/25, 4:03 PM

Can't use the text-crop solution because I'm working with a team and we have specific font sizes setup

Ἔ

ἔρως•4/1/25, 4:25 PM

did you set the line-height to 1?

Chris Bolson•4/1/25, 5:08 PM

Any chance of a Codepen? It does seem rather strange

Ἔἔρως did you set the line-height to 1?

vinceOP•4/1/25, 5:27 PM

CChris Bolson Any chance of a Codepen? It does seem rather strange

vinceOP•4/1/25, 5:27 PM

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

vinceOP•4/1/25, 5:27 PM

Probably on codesandbox

Ἔ

ἔρως•4/1/25, 5:28 PM

you dont need to, with data urls

vinceOP•4/1/25, 5:42 PM

I can't get the font to load locally

vinceOP•4/1/25, 5:42 PM

Am I being stupid here?

Ἔ

ἔρως•4/1/25, 5:48 PM

do you have python or php installed?

vinceOP•4/1/25, 5:49 PM

Ἔ

ἔρως•4/1/25, 5:49 PM

then run a web server with one of those

Ἔ

ἔρως•4/1/25, 5:49 PM

with php is just

Ἔ

ἔρως•4/1/25, 5:50 PM

with python is more annoying and you have to read it because i dont remember

vinceOP•4/1/25, 5:50 PM

Is it the same as live server extension? Just making a localhost server

Vvince Is it the same as live server extension? Just making a localhost server

Ἔ

ἔρως•4/1/25, 5:51 PM

not quite

Ἔ

ἔρως•4/1/25, 5:51 PM

you need to send a specific content-type for the font to load

Ἔ

ἔρως•4/1/25, 5:52 PM

and not all servers support all types

vinceOP•4/1/25, 5:52 PM

I've never had to do that for localhost stuff til now I thought

Ἔ

ἔρως•4/1/25, 5:53 PM

i have no idea how that extension works, but, it's always better to eliminate variables

vinceOP•4/1/25, 5:57 PM

I'll revisit this my head hurts xD

vinceOP•4/1/25, 5:57 PM

been looking at this

all day

Ἔ

ἔρως•4/1/25, 5:59 PM

usually, what i do is to just make the font bigger

vinceOP•4/1/25, 6:02 PM

even w/ the font size bigger it's wildly off center

Chris Bolson•4/1/25, 6:04 PM

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?

Ἔ

ἔρως•4/1/25, 6:04 PM

read this: front-endspace on font

CChris Bolson I can't help thinking that there must be something else effecting this. Have you...

Ἔ

ἔρως•4/1/25, 6:08 PM

it's the space under the baseline

Chris Bolson•4/1/25, 6:15 PM

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).

vinceOP•4/1/25, 6:16 PM

Ah okay I'm dumb I got the font to load locally, it's literally still like this:

vinceOP•4/1/25, 6:16 PM

Maybe the font file they gave me is f*cked?

vinceOP•4/1/25, 6:16 PM

I have actually nothing on it other than padding

vinceOP•4/1/25, 6:16 PM

(sorry I couldn't get a codepen or codesandbox up, I tried but it wasn't loading the font)

vinceOP•4/1/25, 6:16 PM

vinceOP•4/1/25, 6:19 PM

Yea, I just grabbed a random Franklin Gothic Book file from the internet and now the extra spacing is gone

Ἔ

ἔρως•4/1/25, 6:21 PM

the font is fucked, yeah

Vvince Ah okay I'm dumb I got the font to load locally, it's literally still like this:

Ἔ

ἔρως•4/1/25, 6:22 PM

look at the l and the d

Ἔ

ἔρως•4/1/25, 6:22 PM

and the o

Ἔ

ἔρως•4/1/25, 6:22 PM

they are at different positions

vinceOP•4/1/25, 6:42 PM

Yea wtf, every glyph is just messed up

vinceOP•4/1/25, 6:42 PM

It's like distorted / stretched