Solving "text-rendering" problem on Android 4.2 and 4.3

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 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

  <?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;
    }
}


4,947 0 1