The Best Cyprus Community

Skip to content


Trick Chrome/Chromium to render fonts beautifully!

Anything related to the Internet, computers and technology in general.

Trick Chrome/Chromium to render fonts beautifully!

Postby Get Real! » Tue Mar 24, 2015 11:24 am

How to trick Chrome/Chromium to render fonts beautifully!

NB: This one is for developers.

The idea is to get Chromium to assume that the page contains an infinite transform which triggers backface-visibility to beatify the fonts.

To achieve this it's very easy... create a dummy animation that does nothing!

.Dummy{-webkit-animation: Dumbo 1s linear 0s infinite normal none;}
@-webkit-keyframes Dumbo {0% {-webkit-transform: scale(1,1);}}


The “infinite” parameter is very important and any transform for the animation will do fine as long as it's going nowhere.

As can be observed nothing should happen because 1:1 means the element's size doesn't change, but we're gonna further restrict the "animation" by applying it to something very tiny and out of the way.

Therefore we add the animation class to some insignificant static element in the page like a copyright message:

<div class="CopyClass Dummy" style="position:absolute; top:5px; left:900px;">XYZ &#169; Copyright 2015</div>

Voila! Now observe the font quality! :D

The quality is the same as when we set backface-visibility to hidden in the body section, but without the terrible bugs and side effects because we're now controlling it! :wink:

Busted! :)
User avatar
Get Real!
Forum Addict
Forum Addict
 
Posts: 40449
Joined: Mon Feb 26, 2007 12:25 am
Location: Nicosia

Re: Trick Chrome/Chromium to render fonts beautifully!

Postby Oceanside50 » Tue Mar 24, 2015 4:56 pm

Who cares?
Oceanside50
Regular Contributor
Regular Contributor
 
Posts: 2062
Joined: Fri Jan 11, 2013 5:45 pm

Re: Trick Chrome/Chromium to render fonts beautifully!

Postby kurupetos » Tue Mar 24, 2015 10:11 pm

Oceanside50 wrote:Who cares?

YFred.
User avatar
kurupetos
Leading Contributor
Leading Contributor
 
Posts: 17912
Joined: Tue Jul 31, 2007 7:46 pm
Location: Cyprus

Re: Trick Chrome/Chromium to render fonts beautifully!

Postby Lordo » Tue Mar 24, 2015 11:07 pm

you have a bit of a crush on this old fellow aint you. he dont want you. if he did he would return. as he has not returned, we can surmise that he dont like you. doing my kikobullo bit.
User avatar
Lordo
Leading Contributor
Leading Contributor
 
Posts: 11518
Joined: Wed Oct 05, 2011 2:13 pm
Location: softalar, banana republic

Re: Trick Chrome/Chromium to render fonts beautifully!

Postby Get Real! » Wed Mar 25, 2015 2:05 am

I forgot to mention that a page that directly or indirectly triggers/sets backface-visibility does not seem compatible with clipping like "background-clip" or "clip-path".

Feel free to struggle with this as I have, and give me the solution when you find it! :)
User avatar
Get Real!
Forum Addict
Forum Addict
 
Posts: 40449
Joined: Mon Feb 26, 2007 12:25 am
Location: Nicosia

Re: Trick Chrome/Chromium to render fonts beautifully!

Postby kurupetos » Sun Mar 29, 2015 12:37 am

Lordo wrote:you have a bit of a crush on this old fellow aint you. he dont want you. if he did he would return. as he has not returned, we can surmise that he dont like you. doing my kikobullo bit.

He never left, YFred.
User avatar
kurupetos
Leading Contributor
Leading Contributor
 
Posts: 17912
Joined: Tue Jul 31, 2007 7:46 pm
Location: Cyprus


Return to Internet, Computers and Technology

Who is online

Users browsing this forum: No registered users and 0 guests