98.css icon indicating copy to clipboard operation
98.css copied to clipboard

Add documentation for blurry text when pixel offset isn't a precise integer

Open chanagaray opened this issue 2 years ago • 2 comments

Mentioned here, but I believe I've seen this same issue before. I think we should document when this happens and how to prevent it.

chanagaray avatar Dec 20 '23 13:12 chanagaray

It bugs me that this rendering issue is the very first thing you see when devicePixelRatio is 1.

Image

This is of course because the "OK" text is offset bu 0.5px.

Here's how it looks when I manually add a 0.5px spacer for that specific element:

button::before {
  content: "";
  margin-left: 0.5px;
}

Image

Question is of course, is it possible - with CSS only - to add 0.5px spacing to centered elements, or make sure some other way that the text starts on an integer value x position?

karpour avatar Jan 27 '25 14:01 karpour

Another non-ideal way I found that works in Firefox (and possibly Chrome):

<button>
  <span style="display: inline-block;transform: translate(0,0);">OK</span>
</button>

Somehow the combination of inline-block and translate(0,0) makes the text snap to integer pixels. Not sure why exactly, but this way both buttons render properly. I have not found a way to achieve this without wrapping the button text in an extra html element.

karpour avatar Jan 27 '25 15:01 karpour