top

Layout broken due to letter-spacing problem on 2012 platform

Published 2014-10-27 | (Compatible with SDK 3.5,4.5,5.0,5.1 and 2012,2013,2014 models)

Text overflowing its container on 2012 platform due to different font rendering.

The 2012 platform browser uses a different rendering engine than used in previous platforms, which results in larger spaces between letters. Because of this, the layout of fixed-size elements like footers or banners may get broken, or the text may overflow the box.

Source Files

Note

The files needed for the sample application are here.

Solution

If the text of some fixed-size element overflows, decrease the letter-spacing on the Webkit platform only. The examples below show a simple way how to do this - the CSS3 media query recognizes the Webkit browser and applies the appropriate style for this platform only.

Note

It is recommended to decrease the letter spacing only for the elements for which it is necessary, otherwise it may decrease the readability of the application layout.

Example

#div2 {
        position: relative;
        left: 120px;
        width: 720px;

        background-color: #f00;
        font-family: Arial;
        line-height: 18px;
        height: 30px !important;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
        #div2 {
                letter-spacing: -1px;
        }
}