Created
May 28, 2014 06:12
-
-
Save pudgereyem/7da56c2f70fd57f89689 to your computer and use it in GitHub Desktop.
CSS: "text-rendering" problem on Android 4.2 and 4.3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Solving "text-rendering" problem on Android 4.2 and 4.3 | |
| - Source: <https://gist.github.com/pudgereyem/7da56c2f70fd57f89689> | |
| - Comments: <https://twitter.com/pudgereyem> | |
| `text-rendering` enables OT features such as kerning that would normally be set by the browser while also enabling ligatures. | |
| More: <https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering> | |
| Surprisingly, the default browsers in Android 4.2 and 4.3 do not support kerning, while the default browsers in Android 4.1 and 4.4 do. This is caused by a bug in the support for the text-rendering property in Android 4.2 and 4.3. Android 4.4 uses Chrome as its default browser, which does not exhibit the bug. | |
| *(Source: <http://blog.typekit.com/2014/02/05/kerning-on-the-web/>)* | |
| How I solved it was by using [php-user-agent](https://github.com/ornicar/php-user-agent) to detect what browser is used, and then add that information to the `<html>`-element and then remove the set `text-rendering: auto;` for Android 4.3 and 4.2. | |
| Step by step: | |
| ## 1) PHP: Include [phpUserAgent](https://github.com/ornicar/php-user-agent) | |
| ``` | |
| <?php | |
| // Include phpUserAgent | |
| // Link: https://github.com/ornicar/php-user-agent | |
| // Description: Browser detection in PHP5. Uses a simple and fast algorithm to recognize major browsers. | |
| require_once( TEMPLATEPATH . '/library/php-user-agent/phpUserAgent.php'); | |
| require_once( TEMPLATEPATH . '/library/php-user-agent/phpUserAgentStringParser.php'); | |
| $userAgent = new phpUserAgent(); | |
| ?> | |
| ``` | |
| ## 2) PHP: Interrogate the user agent and create $class variable | |
| ``` | |
| <?php | |
| // Interrogate the user agent | |
| // $userAgent->getBrowserName() // firefox | |
| // $userAgent->getBrowserVersion() // 3.6 | |
| // $userAgent->getOperatingSystem() // linux | |
| // $userAgent->getEngine() // gecko | |
| $browserName = $userAgent->getBrowserName(); | |
| $browserVersion = $userAgent->getBrowserVersion(); | |
| // Replace . with - (for css selector reason) | |
| $browserName = str_replace('.', '-', $browserName); | |
| $browserVersion = str_replace('.', '-', $browserVersion); | |
| $class .= ' browser-name-' . $browserName; | |
| $class .= ' browser-version-' . $browserVersion; | |
| ?> | |
| ``` | |
| ## 3) HTML: Insert $class to `<html>`-element | |
| ``` | |
| <html class="<?php echo $class;?>"> | |
| ``` | |
| ## 4) CSS: Remove Text Rendering optimizeLegibility for Android 4.3 and 4.2 | |
| ``` | |
| body { | |
| // Text Rendering | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| // Remove Text Rendering optimizeLegibility for Android 4.3 and 4.2 | |
| .browser-name-android.browser-version-4-3 &, | |
| .browser-name-android.browser-version-4-2-1 &, | |
| .browser-name-android.browser-version-4-2-2 &, | |
| .browser-name-android.browser-version-4-2-3 &, | |
| { | |
| text-rendering: auto; | |
| } | |
| } | |
| ``` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment