Kevin Powell - Community•2mo ago

font is going up !! very frustrating.

we're using gotham and fraunces font, but on some components like buttons the text goes little up without any reason, developer is using tailwind css, when he does leading 0.8 or 0.9 then it doesn't work what might be the issue ?

36 Replies

ἔρως•2mo ago

what do you mean "going up"?

peterpumkineaterrOP•2mo ago

don't you think it is little bit up and not aligned

vince•2mo ago

Yea but there can be a ton of reasons for this; we'd have to see the live site

Chris Bolson•2mo ago

How are you/the developer centering and positioning the elements within the button?

ἔρως•2mo ago

is it aligned at the baseline?

peterpumkineaterrOP•2mo ago

let me share the code for that same container, in the morning

vince•2mo ago

Please share a live link if possible

Kevin Powell•2mo ago

Fonts have extra empty space around them for things like accents and decenders. If you select the text, you'll see that extra spacing.

Kevin Powell•2mo ago

You probably want text-box-trim, but it is fairly new, so browser support isn't perfect https://developer.mozilla.org/en-US/docs/Web/CSS/text-box-trim

MDN Web Docs

text-box-trim - CSS | MDN

The text-box-trim CSS property specifies which of the over and under edges of text content to trim from a text element's block container.

StefanH•2mo ago

If you know your content and font will always be like this you can hack it with translate: 0.1rem or something. Ugly but sometimes you just gotta do what you gotta do. We have a similar case at work with a broken font and just have to hack it a lot :/

Milo•2mo ago

Have you tried messing with the line-height? Or using negative margins?

peterpumkineaterrOP•2mo ago

but why do we have to do this much effort just to center the text ?

StefanH•2mo ago

kevin explained it your text only has numbers but other text might have characters like gjyqp... which have little bits on the bottom the text aligns for that whole region to be aligned you can probably play with vertical-align a bit but in my experience that also doesn't work 100% of the time You have to differenciate between "actual / mathematical" alignment and "optical / perceived" alignment quite a bit. I know it's annoying but i hope you understand why the default is the way it is. It's optimized for the common case scenario. Aligning text like that is an edge case so we need to write edge case code for it

peterpumkineaterrOP•4w ago

<button
              // disabled={!isChecked}
              onClick={applyForDeposit}
              className="size-fit m-0 disabled:border-1 disabled:border-pri block  my-[30px] md:my-[40px] md:mb-0 mr-[30px] md:mr-[40px]  lg:mt-[29px] lg:mb-[31px] xl:mt-[30px] xl:mb-[0px] h-[44px] px-[25px] md:px-[50px] font-gotham text-[12px] text--tri bg--pri rounded-[10px] cursor-pointer uppercase leading-[0]"
            >
              Unlock My Reward
            </button>

<button
              // disabled={!isChecked}
              onClick={applyForDeposit}
              className="size-fit m-0 disabled:border-1 disabled:border-pri block  my-[30px] md:my-[40px] md:mb-0 mr-[30px] md:mr-[40px]  lg:mt-[29px] lg:mb-[31px] xl:mt-[30px] xl:mb-[0px] h-[44px] px-[25px] md:px-[50px] font-gotham text-[12px] text--tri bg--pri rounded-[10px] cursor-pointer uppercase leading-[0]"
            >
              Unlock My Reward
            </button>

peterpumkineaterrOP•4w ago

finally i got this from the developer guys tell me what's the issue ?

ἔρως•4w ago

tailwind also, set the line height to 1

peterpumkineaterrOP•4w ago

i just hate coding at this point tried that

ἔρως•4w ago

it's not there also, try 0 too

vince•4w ago

your developer stinks ngl why are they using tailwind but then hardcoding the values 😭

ἔρως•4w ago

if it is hardcoded everywhere, it's bad bad bad bad bad

peterpumkineaterrOP•4w ago

already did so he should use tailwind properties

ἔρως•4w ago

tailwind has configurations somewhere he should use that

peterpumkineaterrOP•4w ago

what is that exactly so i can tell him also which is good tailwind or something else ? and for the casino what tech stack should be used entirely ?

ἔρως•4w ago

do you use react?

peterpumkineaterrOP•4w ago

i think they're using next

ἔρως•4w ago

then yes, but not directly so, maybe tailwind is the choice

peterpumkineaterrOP•4w ago

okay ..

ἔρως•4w ago

you're asking a question nobody can answer for you check with your local government to see if there's any restrictions and all laws and regulations you have to implement then decide on what tech stack to use

peterpumkineaterrOP•4w ago

the whole project is completed almost i'm just asking for my own knowledge just want to know if they're doing it right or not

ἔρως•4w ago

i can't see why it wouldn't be the right choice, as long as you follow all the laws and regulations

peterpumkineaterrOP•4w ago

so why the button is doing like that ? why the text goes up

ἔρως•4w ago

it may be a rendering bug or is because of the missing the line-height set to 0 or 1 without a live example, it's like asking why pixie dust doesnt sparkle

curiousmissfox•4w ago

Try setting line height to 0. If it doesn’t collapse check the computed tab and see what display value is.

ἔρως•4w ago

that's what ive been saying either 1 or 0

curiousmissfox•4w ago

Sorry didn’t mean to repeat — the thread was so long I didn’t read and I just had this issue on a website where the display was set to inline by a third party library and I couldn’t figure out why until I inspected .

ἔρως•4w ago

no no, please, repeat it ive said that multiple times, but all i saw was code that doesnt have it and screenshots of the issue repeating it is good

Gaming

Programming

font is going up !! very frustrating.

Did you find this page helpful?