TextRectangle Object Sample

The quick brown fox

The
quick brown fox

• The quick brown fox

• The quick
• The quick brown fox
• The quick brown fox jumps over
• The quick brown fox jumps over the lazy dog.

This example uses the TextRectangle collection with the getClientRects and getBoundingClientRect methods to determine the position of the text rectangle within an element. In each line, the left-justified text does not extend to the right margin of the box that contains the text. Using this collection, you can determine the coordinates of the rectangle that surrounds only the content in each line. The example code reads these rectangle coordinates and instructs the ball to move over the text only, and not to the end of the line.

Notice that as you resize the window, the coordinates are not adjusted, since the coordinates are set at onload.

[Right-click and choose View Source from the shortcut menu.]

© 2007 Microsoft Corporation. All rights reserved. Terms of use.