HTML5 Canvas, 2nd Edition

Handling Font Size and Face in Text Arranger

In Text Arranger, we have implemented only a subset of the available font options for displaying 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 id="fontStyle">
 <option value="normal">normal</option>
 <option value="italic">italic</option>
 <option value="oblique">oblique</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 id="fontWeight">
 <option value="normal">normal</option>
 <option value="bold">bold</option>
 <option value="bolder">bolder</option>
 <option value="lighter">lighter</option>
</select>

Generic font faces

Because we cannot be sure which font ...