HTML and CSS Reference
In-Depth Information
Using measureText
The HTML5 Canvas context object includes a useful method, measureText() . When sup-
text settings (font face, size, and so on) in the form of a TextMetrics object. Right now, the
TextMetrics objecthasonlyasingleproperty: width .The width propertyofa TextMetrics
object gives you the exact width in pixels of the text when rendered on the canvas. This can
be very useful when attempting to center text.
Centering text using width
For the Text Arranger application, we will use the TextMetrics object to center the text the
user has entered in the textBox form control on the canvas. First, we retrieve an instance of
TextMetrics by passing the message variable (which holds the text we are going to display)
to the measureText() method of the 2D context and storing it in a variable named metrics :
var metrics = context . measureText ( message );
Then, from the width property of metrics , we get the width value of the text in pixels and
store it in a variable named textWidth :
var textWidth = metrics . width ;
Next, we calculate the center of the screen by taking the width value of the canvas and divid-
ing it in half ( theCanvas.width/2 ). From that, we subtract half the width value of the text
( textWidth/2 ). We do this because text on the canvas is vertically aligned to the left when
it is displayed without any alignment designation (more on this a bit later). So, to center the
text, we need to move it half its own width to the left and place the center of the text in the
absolute center of the canvas. We will update this in the next section when we allow the user
to select the text's vertical alignment:
var xPosition = ( theCanvas . width / 2 ) - ( textWidth / 2 );
What about the height of the text?
So, what about finding the height of the text so that you can break text that is longer than the
width of the canvas into multiple lines, or center it on the screen? Well, this poses a problem.
The TextMetrics object does not contain a height property. The text font size does not give
the full picture either, because it does not take into account font glyphs that drop below the
baseline of the font. While the font size will help you estimate how to center a font vertically
on the screen, it does not offer much if you need to break text into two or more lines. This is
because the spacing would also need to be taken into account, which could be very tricky.
Search WWH ::

Custom Search