Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Inserting custom text into a Web page

From Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

The article is believed to be still valid for the original topic scope.

Article Metadata
Code ExampleTested with
Keywords: Browsing, HTML, CSS, font
Created: aleksi.hanninen (07 Apr 2010)
Last edited: lpvalente (18 May 2014)



This example demonstrates how to make custom text with a figure into a web page intended for mobile web browsers.

Mobile web browsers, such as Android's web browser, Web Browser for S60, and Safari on iPhone, support only some fonts, and some tricks are needed to add special fonts. For more information, see Font support in Nokia Developer Library.

Inserting custom text screenshot.png

The problem is solved by inserting the required text with a special font into a figure, and displaying it instead of ordinary text.

Source: Relevant HTML components

In the first phrase, the figure of the text with a special font is used as a background, and the original text is set as hidden.

<p style="background: white url('example_text.png') no-repeat; width: 99px; height: 19px; ">
<span style="visibility: hidden;" >For example</span>

The second phrase is too long to fit into one line on devices with a screen width less than 240px. In the second phrase, the figure is split into two parts, both of which are less than 240px wide. If the screen is wide enough, both parts are shown in one line.

<span style="display: inline-block;
background: white url('not_fitting.png') no-repeat 0px 0px;
width: 160px; height: 19px; " >

<span style="visibility: hidden;" >This phrase</span>
<span style="display: inline-block;
background: white url('not_fitting.png') no-repeat scroll -165px 0px;
width: 206px; height: 19px; " >

<span style="visibility: hidden;" >is too long to one line.</span>


Text with a special font is now shown on the web page.

Supplementary material

The complete example page containing the examples discussed can be downloaded at File:Inserting custom text

This page was last modified on 18 May 2014, at 19:14.
56 page views in the last 30 days.