{"id":1526,"date":"2010-09-02T16:49:51","date_gmt":"2010-09-02T20:49:51","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=1526"},"modified":"2011-05-14T00:39:30","modified_gmt":"2011-05-14T04:39:30","slug":"how-to-make-cleartype-font-face-fonts-and-css-visual-filters-play-nicely-together","status":"publish","type":"post","link":"http:\/\/www.useragentman.com\/blog\/2010\/09\/02\/how-to-make-cleartype-font-face-fonts-and-css-visual-filters-play-nicely-together\/","title":{"rendered":"How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together"},"content":{"rendered":"<div class=\"importantNotes\">\n<h3>Update (Sept. 3, 2010)<\/h3>\n<ul>\n<li>This article originally has the <code>filter<\/code> and <code>-ms-filter<\/code> rules reversed, which is against <a href=\"http:\/\/blogs.msdn.com\/b\/ie\/archive\/2008\/09\/08\/microsoft-css-vendor-extensions.aspx\">Microsoft&#8217;s best practices<\/a> for IE8.  This error has been corrected.<\/li>\n<li>Thanks to <a href=\"http:\/\/www.zomigi.com\">Zoe Mickley Gillenwater<\/a> for pointing out that IE8 needs to have all the filter functions (i.e. all the stuff in the double quotes) on one line.<\/li>\n<\/ul>\n<\/div>\n<p>The modern web developer wants to be able to use a variety of CSS3 effects together, but sometimes doing this in IE can be challenging, especially if you don&#8217;t want to use JavaScript.  Let&#8217;s take a look a common problem with IE: blocky text in IE when using IE Visual filters on a block of text.  For example, if you&#8217;ve ever tried to do <a href=\"http:\/\/davidwalsh.name\/css-opacity\">the cross-browser CSS opacity trick<\/a> to implement opacity in IE6, this problem manifests itself when the <strong>text is styled with no background color<\/strong>.  A developer uses this well-known cross browser CSS-foo to make this work:<\/p>\n<blockquote class=\"code\">\n<pre>\r\n#badAntiAliasing {\r\n\topacity: 0.5;\r\n\r\n        \/* IE 8 *\/\r\n        -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(opacity=50)\";\r\n\r\n        \/* IE 6,7 *\/\r\n\tfilter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);\r\n\t\r\n}\r\n<\/pre>\n<\/blockquote>\n<p>And it looks great in every browser, but <strong>it looks like crap in Internet Explorer 6 with ClearType turned on.<\/strong>  It is especially pronounced when using @font-face embedding with fonts that assume that some sort of anti-aliasing technology is being used.  The example below uses <a href=\"http:\/\/www.fonts.info\/info\/press\/free-fonts-for-font-face-embedding.htm\">Graublau Sans Web<\/a> with the Alpha filter to illustrate the issue:<\/p>\n<table class=\"dataTable\" style=\"margin-top: 1em\">\n<thead>\n<tr>\n<th>Opacity Solution in IE<\/th>\n<th>Opacity Solution in every other browser<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/ieBadAntiAlias.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/ieBadAntiAlias.png\" alt=\"\" title=\"ieBadAntiAlias\" width=\"361\" height=\"58\" class=\"alignnone size-full wp-image-1530\" srcset=\"http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/ieBadAntiAlias.png 361w, http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/ieBadAntiAlias-300x48.png 300w\" sizes=\"auto, (max-width: 361px) 100vw, 361px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/firefoxAntiAlias.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/firefoxAntiAlias.png\" alt=\"\" title=\"firefoxAntiAlias\" width=\"360\" height=\"50\" class=\"alignnone size-full wp-image-1529\" srcset=\"http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/firefoxAntiAlias.png 360w, http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/firefoxAntiAlias-300x41.png 300w\" sizes=\"auto, (max-width: 360px) 100vw, 360px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>This has been a known problem with IE ever since 2006 when ClearType&#8217;s product manager, Peter Gurevich, <a href=\"http:\/\/blogs.msdn.com\/b\/ie\/archive\/2006\/08\/31\/730887.aspx\">announced on the IEBlog their decision to disable ClearType on elements that use any Visual Filter<\/a>.  If you read the comments on this blog article, you will see many upset developers.  I was one of them, since this not only affects the <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ms532967%28v=VS.85%29.aspx\">Alpha Filter<\/a>, but all of <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ms532849%28v=VS.85%29.aspx\">IE&#8217;s Visual Filters<\/a>, some of which I use in cssSandpaper to get IE to support CSS3 properties like <code>transform<\/code>.<\/p>\n<p>Today, however, we can rejoice.  There is a <strong>usable workaround that will make ClearType rendered fonts look nice when using Visual Filters<\/strong>.  In our example above, here is what needs to be done:<\/p>\n<blockquote class=\"code\">\n<pre>\r\nbody.ie6 #goodAntiAliasing,\r\nbody.ie7 #goodAntiAliasing,\r\nbody.ie8 #goodAntiAliasing {\r\n\tbackground-color: <span class=\"hilite\">white<\/span>;\r\n}\r\n\r\n#goodAntiAliasing {\r\n\topacity: 0.5;\r\n\r\n        \/* IE 8: yes, it is ugly but it has to be on one line. :-( *\/\r\n        -ms-filter: \"progid:DXImageTransform.Microsoft.Chroma(<span class=\"hilite\">color='white'<\/span>) progid:DXImageTransform.Microsoft.Alpha(opacity=50)\";\r\n\r\n        \/* IE 6,7 is more flexible: it can be on multiple lines. *\/\r\n\tfilter: progid:DXImageTransform.Microsoft.Chroma(<span class=\"hilite\">color='white'<\/span>)\r\n                progid:DXImageTransform.Microsoft.Alpha(opacity=50);\r\n\t\r\n}\r\n<\/pre>\n<\/blockquote>\n<p>What is going on here?<\/p>\n<ol>\n<li>The first rule sets the background color of the container to a color that is represents the color of the majority of the background image on the page.  <strong>Note that this rule uses <a href=\"http:\/\/paulirish.com\/2008\/conditional-stylesheets-vs-css-hacks-answer-neither\/\">Paul Irish&#8217;s Conditional CSS Pattern<\/a> to serve it only to IE.<\/strong><\/li>\n<li>The second rule executes two of IE&#8217;s Visual Filters:\n<ul>\n<li>the Chroma Visual Filter, which tells IE &#8220;Please make this color transparent&#8221;.  The color we choose to make transparent is the one we selected in the first rule.<\/li>\n<li>the Alpha Visual Filter, which does the opacity trick<\/li>\n<\/ul>\n<\/ol>\n<table class=\"dataTable\">\n<thead>\n<tr>\n<th>Default Opacity in IE<\/th>\n<th>New Opacity Solution in IE<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/ieBadAntiAlias.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/ieBadAntiAlias.png\" alt=\"\" title=\"ieBadAntiAlias\" width=\"361\" height=\"58\" class=\"alignnone size-full wp-image-1530\" srcset=\"http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/ieBadAntiAlias.png 361w, http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/ieBadAntiAlias-300x48.png 300w\" sizes=\"auto, (max-width: 361px) 100vw, 361px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/ieBadAntiAlias.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/ieGoodAntiAlias.png\" alt=\"\" title=\"ieBadAntiAlias\" width=\"361\" height=\"58\" class=\"alignnone size-full wp-image-1530\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>These filters must be in the order given<\/strong>, and not the other way around.  Note also that care must be given that <strong>the color chosen to be transparent should be the average color of what is behind the text being styled<\/strong>, otherwise you will get less than optimal results.  If this background is a complex image, just use the colour that&#8217;s used most often.<\/p>\n<p>This fixes not only the IE opacity problem, but also issues with other Visual Filters, such as <code>Matrix<\/code>.  I will be updating cssSandpaper to use this trick so that transformed objects in IE won&#8217;t look so blocky.<\/p>\n<p><a class=\"exampleLink\" href=\"\/tests\/fontFacePlusFilter\/\">Take a look at the solution in action (make sure you look at it in IE in order to get the full effect)<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/09\/ieBadAntiAliasFront.png\" \/> Ever had a problem with using IE&#8217;s Alpha Visual Filter and getting blocky text? A solution has been found, and it doesn&#8217;t use JavaScript.  I expect to hear a sigh of relief from many developers.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,51,9,38,10,120],"tags":[58,57,30,55,221,53,44,54,223,56,52],"class_list":["post-1526","post","type-post","status-publish","format-standard","hentry","category-font-face","category-cleartype-technologies","category-css","category-css3","category-fonts","category-ie-visual-filters","tag-anti-aliased-text","tag-blocky-text","tag-cleartype","tag-css-filters","tag-css3","tag-ie","tag-ie-filters","tag-internet-explorers","tag-matrix","tag-opacity","tag-visual-filters"],"_links":{"self":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/1526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=1526"}],"version-history":[{"count":32,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/1526\/revisions"}],"predecessor-version":[{"id":3276,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/1526\/revisions\/3276"}],"wp:attachment":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=1526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=1526"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=1526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}