Font change part 2: playing with the line height

vuorisalmi | 21 December, 2011 14:49

As announced on 18th November in this blog, we have a new version of the default font of Nokia N9, the Nokia Pure Text. The updated font is already publically available in the Middle East and African variant (PR1.1.1, 22.2011.44-2) and it will be changed in all devices in a future software update.

The reasons for the change are the requirements of certain non-latin scripts, e.g. Arabic, and also the need to fix a number of small issues in the latin script as well.

As a result of the update, the text will take approximately 20% more space vertically. There are also other smaller changes, but the increase in the height of the text is the most significant one. This will impact the UIs of many of the applications and needs to be taken into account one way or the other. The change only applies to the Nokia Pure Text font, if you use some other typeface, your application is not impacted.

Typically the application developers would like the text to render more or less identically on the screen independent of the platform software version of the device. The first blog post presented an idea of wrapping each text Label into an invisible Qt Quick Item whose size was relative to the pixel size of the font.

This blog entry provides another proposal, something that is more suitable for multi-line text, especially when you do not know or do not want to know how many lines of text will actually be shown (a typical case when e.g. localizing the texts into multiple different languages).

The Qt Quick Text element has two interesting properties Text.lineHeightMode and Text.lineHeight, also inherited by the Label element of Qt Quick Components, which is the one that you should use in most of the cases:

  • Text.lineHeightMode -- either Text.ProportionalHeight or Text.FixedHeight
  • Text.lineHeight -- in pixels (if the mode is Text.FixedHeight) or a line-height multiplier

The default mode is Text.ProportionalHeight. It causes the text to render quite differently when using the old (PR1.0/PR1.1 on the left) and the new version of the font (on the right):

Font change part 2, picture 1

However, if we change the mode to Text.FixedHeight and then adjust the Text.lineHeight into a suitable pixel value, the resulting text will render (almost) exactly the same independent of the N9 software release. In the next example, the line height has been set to 1.3 x pixel size of the font, and it looks almost the same as the default rendering with the new font (compare to the right-hand side of the first picture above):

Font change part 2, picture 2

And here is how the last part of the second example would look like in Qt Quick code: 

import QtQuick 1.1
import com.nokia.meego 1.0
Page {
    // ...
    Rectangle {
        color: "#ffffbb"
        width: parent.width
        height: multiLineLabel.height
        // ...
        Label {
            id: multiLineLabel
            font.pixelSize: 24
            width: parent.width
            wrapMode: Text.WordWrap
            lineHeightMode: Text.FixedHeight
// Based on trials 1.3 gives quite nice line spacing
            lineHeight: font.pixelSize * 1.3
            text: "In general, it is a good idea ..."
        }
    }
}

Using these ideas, you should be able to create a UI that will look almost exactly the same in all software releases.

A final note: The change will not just impact the application UIs now, when preparing existing applications from PR1.0/PR1.1 to PR1.1.1 and the future software release. Later on, when developing on N9 with new software, you also have to ensure the application UI looks correct on devices with older software version.

In this article, our target was to make the text look the same independent of the version of the font and device software. This is a common need, but the drawback is that we do not get any benefit of the updated (and better) font metrics either. In other cases, it is perfectly ok and acceptable that the space the text takes varies from one software release to another (also, from one language to another). That will be the topic of the next article.

Arabic , Localization , MeeGo , UI , N9 , Qt Quick | Next | Previous | Comments (2) | Trackbacks (0)

RSSComments

Determine lineheight for proportional text

ajakl | 13/01/2012, 17:36

ajakl

What I'd need is a way to get the line height for a specified font size (= pixelSize of the font + margins).

However, the lineHeight property is only set when the lineHeightMode is fixed, and not for proportional.

Is there any other way to get the prospective height taken up by a font with a specific size in QML, regardless of the firmware version - except creating a dummy Text element, measuring its actual height and destroying it again?

In Qt C++, this would be possible through QFontMetrics, but that doesn't seem to be exposed to QML yet, unfortunately.

Determine lineheight for proportional text

ajakl | 13/01/2012, 19:13

ajakl

The C++ approach (but having something easier just in QML would of course be nice):

int getFontHeight(const QString& fontName, const int fontPixelSize) {
QFont *font = new QFont(fontName);
font->setPixelSize(fontPixelSize);
QFontMetrics *fm = new QFontMetrics(*font);
const int fontHeight = fm->height();
delete fm;
delete font;
return fontHeight;
}

[...]

QDeclarativePropertyMap *platformStyle = new QDeclarativePropertyMap();
platformStyle->insert("fontHeightMedium", QVariant(getFontHeight(QString("Nokia Pure Text"), 22)));
viewer.rootContext()->setContextProperty("customPlatformStyle", platformStyle);

You must login to post comments. Login
 
Featured links
Develop
Distribution
Blogs
Community
Resources
Site Map
Terms & Conditions
Privacy Policy
Nokia Developer aims to help you create apps and publish them so you can connect with users around the world.

京ICP备05048969号  © Copyright Nokia 2013 All rights reserved