Is there a way to make css letter-spacing: 0.5 px?
https://stackoverflow.com/questions/7811225
-
26-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I ran across the problem, I need to make it easy for users to read the text, so I used letter-spacing of 1 px, but it looks ugly, so I thought I'll use half a pixel so 0.5px, but it doesn't work, I tried using em attributes, but didn't achieve the task.
So is there a way to make letter spacing half pixel (cross browser solution if possible)
Solution
This bug has been reported back in 2008 and is confirmed. So if someone feels like hacking into webkit that would make a lot of designers happy.
OTHER TIPS
Sub-pixel letter spacing works fine on FF, but not on WebKit (at least on Windows). See this test case:
http://jsfiddle.net/fZYqL/2/
This test also shows that it is not the sub-pixel literal value that is a problem. Using fractional em values that result in less than 1px of letter-spacing are also not honored on Webkit, but work just as well on Firefox.
This bug has been fixed in Chromium and landed in Chrome 30. So fractional values are now supported by Firefox, Chrome and Opera.
@Zach Re: fractional pixels. Although they do not exist physically, they are simulated digitally by transparencies and changes in colour. A good example are icons and the serifs of type. A close look at what appears to be a very thin line will quickly show that it is simulated by rendering the line with a lighter colour that fools the eye. So even when they do not exist, graphic software has dealt with fractional pixels properly since a long time. It is a shame that webkit browsers still don't.
Re: fractional letter spacing. It can be specified and works fine in non-webkit browsers (kudos for IE for once). In webkit browsers letter spacing is rounded to the closest integer (I believe that it is rounded down). This rounding happens not only when the letter-spacing is specified directly as a fractional pixel but also when it is specified as a percentage or em value and the final calculation in pixels results into a fractional pixel. Very frustrating.
Sub-pixel sizes are legal, but they can have unpredictable results across browsers. Things like text also try to align themselves to whole pixels (as Phrogz says), so chances are the resulting rounding errors might make things look uneven.
Fractional letter-spacing values are supported by Webkit, Firefox, Chrome and Opera, since the end of 2013.
Confirmed by CSS Tricks - https://css-tricks.com/almanac/properties/l/letter-spacing/
And I just tested it.
