HTML and CSS Reference
In-Depth Information
<option value="lighter">lighter</option>
</select>
Generic font faces
Because we cannot be sure which font will be available in the browser at any time, we
have limited the font face choices in Text Arranger to those that are defined as “generic”
in the CSS specification:
serif
,
sans-serif
,
cursive
,
fantasy
, and
monospace
.
Here is the markup we used to create the font face
<select>
box in HTML:
<select id="textFont">
<option value="serif">serif</option>
<option value="sans-serif">sans-serif</option>
<option value="cursive">cursive</option>
<option value="fantasy">fantasy</option>
<option value="monospace">monospace</option>
</select>
Font size and HTML5 range control
To specify the size of the font, we have implemented the new HTML5
range
form
control.
range
is an
<input>
type that creates a slider on the HTML page to limit the
numerical input to that specified in the range. A
range
is created by specifying
range
as
the
type
of a form input control.
range
has four properties that can be set:
min
The minimum value in the range
max
The maximum value in the range
step
The number of units to step when the range slider is moved
value
The default value of the range
Here is the markup we used to specify the range in the Text Arranger HTML:
<input type="range" id="textSize"
min="0"
max="200"
step="1"
value="50"/>
If the browser does not support this
range
control, it will be rendered as a text box.
At the time of this writing,
range
did not render in Firefox.
