Introduction
Getting Started
Using Text
Using Colours
Graphics
Sample Pages
Using Layers
Javascript
Projects
References
Introduction
Research indicates that North American TV viewers watch television
from a distance of nine feet or more. This means that you must use text
that is large enough to be read from across the room.
Fonts that are easily read are the sans-serif font family such as Helvetica
and Arial.
Coding Tips
Once we start coding we run into the problem of what you see in your
computer monitor using the standard Web browser is NOT
what you are going to see in WebTV (Microsoft TV) through the set top
box!!
For instance, Web TV (Microsoft TV) automatically converts fonts to Helvetica
(and in some cases Monaco) and converts all fonts smaller than 18 points
to 18 points, unless the font sizes are set by Cascading Style Sheets.
To begin coding, we could use Dreamweaver and set the document page size
to the "544x378 (WebTV)" settling. This will give a very rough
idea of the location of the location of the images and TV screen size
and their locations.
BUT,
it will not really help as far as layout of the text. I use Draemweaver
to get an idea of the number characters per line by typing in a line of
random numbers and letters of different font sizes.
View the file in the Microsoft TV Simulator to get an idea of the number
of characters that can be seen on the page for each line and type size.
To begin coding:
1. Use any HTML coding program of your choice. You can use an HTML Web
Site editor such as, HomeSite, Dreamweaver or FrontPage2000. Set the document
size to 544 x 420 pixels.
2. Set the Font Face property to be " Helvetica, Arial, sans-serif".
The only font supported is Arial (or Helvetica). If you use fonts such
as Times Roman etc. , WEBTV (Microsoft TV )software translates the font
automatically to a sans-serif face. Keep control of the final viewed font
size by using linked Cascading Style Sheets.
The code for this is <link rel="stylesheet" type="text/css"
href="mystyle.css">
Put this in the <HEAD> </HEAD> section.
4. Code the text file mystyle.css" by either using NotePad or by
using the Style Sheet Wizard in Dreamweaver.
5. A comprehensive tutorial on Cascading Stylesheets can be found
in http://html.miningco.com/compute/html/msubcss.htm
Remember that WEBTV (Microsoft TV) standard is
only CSS level 1.
6. WEBTV developer's
site shows which CSS properties are not supported.
7. In all cases you will get a fair idea of the text size, colour and
location by viewing the file in the MicrosoftTV Simulator.
8. DONT crowd the text too
close to the edge of the screen. Remember that most TV receivers only
show 90% of the video and web page area.
(Download the simulator.
The file size is 9.0 MB. View the Microsoft TV Simulator documentation
. File size is 388KB.)
9. The final file is then viewed in the TV receiver. Try using several
different TV makes and screen sizes.
More on Text Coding Tips
Microsoft TV and WebTV browsers will support, the following most
common CSS properties:
font-family, font-size, font-style, font-weight, color,
A typical line of CSS code would look like this
body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; font-weight: bold; color: #FF0000;}
In order to gain an idea of size and fit, we usually start by typing out
four lines of text each with a different font size ranging from 16 pt
to 24 pt.
Type out the alphabet four times for each font size to get an idea of
how many characters can fit in the space set aside for the text. Then
view the text on the TV screen to see how many characters will actually
fit. You will find that in most cases, the Microsoft TV Simulator will
work well to resolve the text fit problem.
You will find that you will be limited to the range of font sizes you can use, because you will be trying to juggle legibility, text content against TV viewing area. Here is the range of font sizes you can use:
| Hint | The minimum size font that is readable in the TV set
screen is 16 pt. Body font can be 18 pt. or 20 pt. Headers are usually 22 pt or 20 pt. |
Trying to code the text with the above font sizes in Dreamweaver with
the page set to 544 x 372 will show the text overflowing the page borders!
This will also give an erroneous view when viewed in the Internet Explorer
4.x and up Browser.
A good start is to use the table below to get an idea of how the final text will look like:
| Hint | See Kreb's book pg. 137 In order to get an idea of how the text looks in Dreamweaver with the document size set to 544 x 378. Use the following approximate relationship : | |
| Font size on personal computer | Equivalent font size on Microsoft TV | |
| 13 pt Arial bold | 18 pt Helvetica | |
| 14 Arial bold | 20 pt Helvetica | |
| 16 pt Arial bold | 22 pt Helvetica | |
Background Colours
Colours will be covered in more detail in the next section, but the one
golden rule is ,never use a white background, i.e. #FFFFFF.
White is very hard on the viewers eyes and may present problems with TV
signal overmodulation. If you must use white, then try a grey say, #F0F0F0.
Although it is not a Web Safe colour, it gives the appearance of whiteness.
Download test pages showing the way WEBTV (Microsoft TV) handles the font
sizes:
View test page in MicrosoftTV Simulator
showing the font size set by CSS.
View test page in the Microsoft TV Simulator
showing the font size set by font size tag.
REFERENCES
1. The WEBTV site has a helpful section on coding for the Sony WEBTV set top box.
2. Download MicrosoftTV Simulator
3. View the Microsoft TV Simulator documentation
4. Chapter 8, "Formatting Microsoft TV Content with Styles and StyleSheets", and Chapter10, "Creating Text for Microsoft TV" from "Building Interactive Entertainment and E-Commerce content for Microsoft TV, by Peter Krebs, Charlie Kindschi, Julie Hammerquist. Published by Microsoft Press, 2000. ISBN 0-7356-0628-5
5.Search Altavista, Google or 37.com for "webtv authoring".
6. Some specific topics:
General Authoring: http://developer.webtv.net/authoring/
Cascading Style Sheets: http://developer.webtv.net/authoring/css/
Making Text Readable on Television http://developer.webtv.net/design/text-readable/text.htm