cssantialiasinggrayscaleghost

Grayscale filter on text, removes part of the text on Ghost's Casper

I've been searching the web for quite a while and couldn't find an answer.

First, let me explain what I'm trying to achieve, some websites are using grayscale antialiasing on their texts and it makes them look better. (IMO)

Here's an example from medium: https://i.sstatic.net/i8fXI.png If you zoom in, the text remains gray.

Twitter does it too: https://i.sstatic.net/OgNq2.png

Now, an example that doesn't do it, Google: https://i.sstatic.net/ijuC4.png I've modified CSS and applied filter: grayscale(0%); which is the only way that I know to achieve this effect.

Modified Google: https://i.sstatic.net/5B4b6.png

Now, my problem. Ghost doesn't do this by default: https://demo.ghost.io/welcome/

You can see it here: https://i.sstatic.net/fDOpQ.png

When I apply the thing I did to Google above, this happens: https://i.sstatic.net/w4Ctu.png

The numbers are gone, half eaten.

Here's a better picture: https://i.sstatic.net/G2UJr.png

All I did is adding filter: grayscale(0%); on both Google and here. It works brilliantly on Google. Also worked in Wordpress but in Ghost, I have this weird problem.

Is there any way to fix this OR how Twitter, Medium etc. are doing this? I tried to look at their CSS but there's nothing about grayscaling or filters. Also saw some anti-aliasing stuff that's supposed to do this but on Chrome nothing does it.

Any help would be appreciated, thanks in advance.

Solution

  • I played around with their CSS and have come to conclusion: The ordered (and numbered) list ol that you describe seems to interfere with filters and doesn't accept them like that. But that's a structual problem. It would definitely help if we (or them) change the markup-structure or search for CSS attributes that make this problem happen.

    The following worked for me:

    body { filter: grayscale(0%) };

    Alternatively, you can easily apply the filter to p or div elements, which contains your desired text.