×
Namespaces

Variants
Actions

Inserting custom text into a Web page

From Nokia Developer 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
Devices(s):  
Compatibility
Platform(s):  
Article
Keywords: Browsing, HTML, CSS, font
Created: aleksi.hanninen (07 Apr 2010)
Last edited: lpvalente (18 May 2014)

Contents

Overview

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

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.

<p>
<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>
<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>
</span>
</p>


Postconditions

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 snippet.zip.

This page was last modified on 18 May 2014, at 22:14.
151 page views in the last 30 days.
×