Inserting custom text into a Web page

Comments

(no comments yet)

Log in or Join to leave comments.

Article Metadata

---

Code Example

Source file: Media:Inserting custom text snippet.zip

---

Tested with

Devices(s):  

---

Compatibility

Platform(s):  

---

Article

Keywords: Browsing, HTML, CSS, font

Created: aleksi.hanninen (07 Apr 2010)

Last edited: hamishwillee (05 Jul 2012)

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.

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.