Language References
HTML 2, 3.2, 4, 4.01, 5
Specifies a rectangle that contains a line of text in an element or TextRange object.
A collection of TextRectangle objects is retrieved by applying the getClientRects method to an element or text range object. The getClientRects method returns a collection of rectangles, exposing for each rectangle the left, top, right, and bottom coordinates relative to the client.
In the Gettysburg Address below, four TextRectangle objects are contained in the B object ( bolded text ).
Four score and seven years ago our fathers
brought forth . . . a new nation, conceived in liberty
and dedicated to the proposition that all men are
created equal. Now we are engaged in a great civil war . . . |
The rectangle objects are:
- The rectangle around "our fathers"
- The rectangle around "brought forth . . . a new nation, conceived in liberty"
- The rectangle around "and dedicated to the proposition that all men are"
- The rectangle around "created equal"
Note that if the window is resized, the TextRectangle objects are not updated. Since the objects are a "snapshot" of the layout, the objects should be updated following an onresize event.
TextRectangle Members
The example below demonstrates the use of the getClientRects and getBoundingRect methods to highlight text lines in an object.
Sample Code
<script language="JavaScript">
function newHighlite ( obj ) {
oRcts = obj.getClientRects ( );
iLength = oRcts.length;
if ( event.altKey == true ) {
keyCount=keyCount ++;
if ( keyCount > iLength-1 ) {
keyCount = 0
}
}
// determine the coordinates for the yellow DIV
// right
iRight = oRcts[keyCount].right + sBody.scrollLeft;
// left
iLeft = oRcts[keyCount].left + sBody.scrollLeft;
// top
iTop = oRcts[keyCount].top + sBody.scrollTop;
// set the rendering properties for the yellow DIV
sYellow.style.top = iTop;
sYellow.style.width = ( iRight-iLeft ) - 5;
sYellow.style.display "inline';
// determine the coordinates for the beige DIV
iBndRight = obj.getBoundingClientRect ( ).right + sBody.scrollLeft;
iBndLeft = obj.getBoundingClientRect ( ).left + sBody.scrollLeft;
iBndTop = obj.getBoundingClientRect ( ).top + sBody.scrollTop;
// set the rendering properties for the beige DIV
sBeige.style.top = iBndTop;
sBeige.style.width = ( iBndRight - iBndLeft ) - 5;
sBeige.style.height = iTop - iBTop;
// display beige area only after 1st line
if ( event.altKey == true ) {
idBeige.style.display = "inline";
}
}
</script>
...
<div id="s1" style="position:absolute;
left:5; top:250; z-index: 1"
onclick="newHighlite ( this )"
onkeypress="newHighlite ( this )">
...
</div>
<div id="sYellow" style="position:absolute;
left:5; top:400; z-index:0;
background-color: yellow;
display: none"></div>
<div id="sBeige" style="position:absolute;
left:5; top:400; z-index:-1;
background-color: beige;
display: none"></DIV>
Show me
The next example shows how the TextRectangle collection and getBoundingClientRect method can be harnessed to determine position 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 the collection, it is possible to determine the coordinates of the rectangle that surrounds only the content in each line.
By reading these rectangles and then comparing the coordinates against the rectangle around the ball image, the sample instructs the ball to move over the text only and not to the end of the line.
Sample Code
function loadDone ( ) {
// get rectangles of the range
oTxtRng = document.body.createTextRange ( );
oRcts = oTxtRng.getClientRects ( );
iLine = 0;
// get bounds of the rectangle on the DIV
// encasing the ball image
oBndRct = obj.getBoundingClientRect ( );
iDivLen = oBndRct.right - oBndRct.left + 1;
...
iPosInLine = oRcts[iLine].left;
...
// make comparison
if ( iPosInLine >= oRcts[iLine].right - iDivLen )
}
Show me
Note that the timers are reset and the loaded functions are fired for each resize.
<body . . . onresize="end ( ); loadDone ( )" ... >
getBoundingClientRect, getClientRects, TextRectangle Collection