HTML and CSS Reference
In-Depth Information
Handling Font Size and Face in Text Arranger
InTextArranger,wehaveimplementedonlyasubsetoftheavailablefontoptionsfordisplay-
ing text. We have chosen these to make the application work in as many browsers as possible.
Here is a short rundown of the options we will implement.
Available font styles
CSS defines the valid font styles as:
normal
|
italic
|
oblique
|
inherit
In Text Arranger, we have implemented all but
inherit
.
Here is the markup we used to create the font style
<select>
box in HTML. We made the
id
of the form control equal to
fontStyle
. We will use this
id
when we listen for a
change
event, which is dispatched when the user updates the value of this control. We will do this for
all the controls in this version of Text Arranger:
<select
<select id=
"fontStyle"
>
<option
<option value=
"normal"
>
normal
</option>
</option>
<option
<option value=
"italic"
>
italic
</option>
</option>
<option
<option value=
"oblique"
>
oblique
</option>
</option>
</select>
Available font weights
CSS defines the valid font weights as:
normal
|
bold
|
bolder
|
lighter
|
100
|
200
|
300
|
400
|
500
|
600
|
700
|
800
|
900
|
inherit
|
auto
We have used only
normal
,
bold
,
bolder
, and
lighter
in Text Arranger. You can add the
other values as you see fit.
Here is the markup we used to create the font weight
<select>
box in HTML:
<select
<select id=
"fontWeight"
>
<option
<option value=
"normal"
>
normal
</option>
</option>
<option
<option value=
"bold"
>
bold
</option>
</option>
<option
<option value=
"bolder"
>
bolder
</option>
</option>
<option
<option value=
"lighter"
>
lighter
</option>
</option>
</select>
