<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Komodo Media &#187; KTSH</title>
	<atom:link href="http://www.komodomedia.com/tags/ktsh/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.komodomedia.com</link>
	<description>blog, webdesign, illustration &#38; newsk00l javascript</description>
	<lastBuildDate>Wed, 18 Jan 2012 14:43:34 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Safari&#8217;s text-shadow anti-aliasing CSS hack Revision</title>
		<link>http://www.komodomedia.com/blog/2009/03/safari-text-shadow-anti-aliasing-css-hack/</link>
		<comments>http://www.komodomedia.com/blog/2009/03/safari-text-shadow-anti-aliasing-css-hack/#comments</comments>
		<pubDate>Tue, 31 Mar 2009 14:33:09 +0000</pubDate>
		<dc:creator>Rogie</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Nerdlab]]></category>
		<category><![CDATA[anti-alias]]></category>
		<category><![CDATA[KTSH]]></category>
		<category><![CDATA[safari]]></category>
		<category><![CDATA[text-shadow]]></category>

		<guid isPermaLink="false">http://www.komodomedia.com/?p=1267</guid>
		<description><![CDATA[I want to talk about a fix I found for Safari 3 and 4 for it&#8217;s issues with bad text-rendering with text, especially light text on a dark background. Previously, web developers have been using a text-shadow hack explained here.
I learned of this technique through Bryan Veloso, who was using a black text shadow with [...]]]></description>
			<content:encoded><![CDATA[<p>I want to talk about a fix I found for Safari 3 and 4 for it&#8217;s issues with bad text-rendering with text, especially light text on a dark background. Previously, web developers have been using a <a href="http://sam.brown.tc/entry/348/safaris-text-shadow-anti-aliasing-css-hack">text-shadow hack explained here</a>.</p>
<p>I learned of this technique through <a href="http://avalonstar.com">Bryan Veloso</a>, who was using a black text shadow with zero blur and zero offset to force Safari&#8217;s sub-pixel rendering of text to not appear as a bit more legible, especially on dark backgrounds. Having known nothing of this (I know right, where was I?), I fired up both Safari 3 and Safari 4 to see what was going on. Let&#8217;s check out how Safar 3 and 4 render light text on a dark background.</p>
<h3>Safari 4</h3>
<p>Out of the box, Safari 4&#8217;s font rendering looks good with both light on dark text as well as dark on light text as seen here.</p>
<p><img src="http://d2dnrmagaqciul.cloudfront.net/wp-content/uploads/2009/03/safari_4.gif" alt="Safari 4's Text Rendering" title="Safari 4's Text Rendering" width="460" height="300" class="aligncenter size-full wp-image-1268" /></p>
<h3>Safari 3</h3>
<p>Now I know why this hack was created and <a href="http://equinox-of-insanity.com/2007/08/osx-text-rendering/">you can read more about it here</a>. As you can see in the light on dark background text below, the text is bulky, and almost bleeds the letters together. It looks nothing like the sweet text on the right, which looks clean, crisp and legible.</p>
<p><img src="http://d2dnrmagaqciul.cloudfront.net/wp-content/uploads/2009/03/safari_3.gif" alt="Safari 3's Text Rendering" title="Safari 3's Text Rendering" width="460" height="300" class="aligncenter size-full wp-image-1268" /></p>
<h3>The original text-shadow hack</h3>
<p>Let&#8217;s see the original text-shadow hack, implemented by the following CSS:</p>
<p><code>text-shadow: #000 0 0 0;</code></p>
<h3>Safari 3 with text-shadow hack</h3>
<p><img src="http://d2dnrmagaqciul.cloudfront.net/wp-content/uploads/2009/03/safari_3_tshack.gif" alt="Safari 3's Text Rendering with Hack" title="safari_4_tshack" width="460" height="300" class="aligncenter size-full wp-image-1279" /></p>
<h3>Safari 4 with text-shadow hack</h3>
<p><img src="http://d2dnrmagaqciul.cloudfront.net/wp-content/uploads/2009/03/safari_4_tshack.gif" alt="Safari 4's Text Rendering with Hack" title="safari_4_tshack" width="460" height="300" class="aligncenter size-full wp-image-1279" /></p>
<p>So the fix that fixed Safari 3 seems to have gone a muck in Safari 4. Here&#8217;s where the revised fix comes in. I read over in the comments on <a href="http://sam.brown.tc/entry/348/safaris-text-shadow-anti-aliasing-css-hack">Sam Brown&#8217;s site </a> that you can apply a text shadow similar to the background color on the offending areas to fix this &#8211; in this case, any white background area. I tried it and he&#8217;s right, it works like a charm. However, I thought up a neat little solution, which I&#8217;m sure others have thought of too that fixes both scenarios with one rule:</p>
<p><code>text-shadow:rgba(0,0,0,0.01) 0 0 0;</code></p>
<p><strong>The premise is simple:</strong> use an extremely transparent black (1% visible to be exact). This way the black doesn&#8217;t bleed around the text as seen in the light background case, but is forces Safari to render the text in a more legible manner. Now, let&#8217;s look at what it looks like:</p>
<h3>Safari 4 with revised &#8220;Komodo&#8221; text-shadow hack</h3>
<p><img src="http://d2dnrmagaqciul.cloudfront.net/wp-content/uploads/2009/03/safari_4_new_tshack.gif" alt="Safari 4's Text Rendering with Komodo Hack" title="safari_4_tshack" width="460" height="300" class="aligncenter size-full wp-image-1279" /></p>
<h3>Safari 3 with revised &#8220;Komodo&#8221; text-shadow hack</h3>
<p><img src="http://d2dnrmagaqciul.cloudfront.net/wp-content/uploads/2009/03/safari_3_new_tshack.gif" alt="Safari 4's Text Rendering with Komodo Hack" title="safari_4_tshack" width="460" height="300" class="aligncenter size-full wp-image-1279" /></p>
<p><strong>It&#8217;s beautiful!</strong> I name it the &#8220;Komodo text-shadow hack&#8221; or KTSH for short.</p>
<p>That seems like it does the trick to me, what do you think? </p>
]]></content:encoded>
			<wfw:commentRss>http://www.komodomedia.com/blog/2009/03/safari-text-shadow-anti-aliasing-css-hack/feed/</wfw:commentRss>
		<slash:comments>35</slash:comments>
		</item>
	</channel>
</rss>

<!-- Served from: komodomedia.com @ 2012-02-10 13:36:33 by W3 Total Cache -->
