HTML and CSS Reference
In-Depth Information
right
Text is displayed with the
y
position in the rightmost position of the text (just like
end
).
For example, to set the text alignment to
center
, you would use the code:
context
.
textAlign
=
"center"
;
After this property is set, all text would be displayed with the
y
value of the text as the center
point. However, this does not mean the text will be “centered” on the canvas. To do that, you
need to find the center of the canvas and use that location as the
y
value for the text position.
We will do this in Text Arranger.
These values can also be modified by the
dir
attribute of the
Canvas
object (inherited from
the DOM
document
object).
dir
changes the direction of how text is displayed; the valid val-
ues for
dir
are
rtl
(“right to left”) and
ltr
(“left to right”).
Handling text baseline and alignment
We are going to handle the text baseline and alignment much like we handled the other text
properties in Text Arranger. First, we will add some variables to the
canvasApp()
function in
which Text Arranger operates that will hold the alignment values. Notice that we have set the
textAlign
variable to
center
, helping us simplify centering the text on the canvas:
var
var
textBaseline
=
"middle"
;
var
var
textAlign
=
"center"
;
Next, we add the
<select>
form elements for each new attribute to the HTML portion of the
page:
Text Baseline
<select
<select id=
"textBaseline"
>
<option
<option value=
"middle"
>
middle
</option>
</option>
<option
<option value=
"top"
>
top
</option>
</option>
<option
<option value=
"hanging"
>
hanging
</option>
</option>
<option
<option value=
"alphabetic"
>
alphabetic
</option>
</option>
<option
<option value=
"ideographic"
>
ideographic
</option>
</option>
<option
<option value=
"bottom"
>
bottom
</option>
</option>
</select>
</select>
<br>
<br>
Text Align
<select
<select id=
"textAlign"
>
<option
<option value=
"center"
>
center
</option>
</option>
<option
<option value=
"start"
>
start
</option>
</option>
<option
<option value=
"end"
>
end
</option>
</option>
<option
<option value=
"left"
>
left
</option>
</option>
<option
<option value=
"right"
>
right
</option>
</option>
