Specifies a rectangle that contains a line of text in either an element or a TextRange object.
Members Table
The following table lists the members exposed by the
TextRectangle
object.
| Property | Description |
|---|
| bottom |
Set or retrieves the bottom coordinate of the rectangle surrounding the object content. |
| left |
Sets or retrieves the left coordinate of the rectangle surrounding the object content. |
| right |
Sets or retrieves the right coordinate of the rectangle surrounding the object content. |
| top |
Sets or retrieves the top coordinate of the rectangle surrounding the object content. |
Remarks
Apply the getClientRects method to an element or text range object to retrieve a collection of TextRectangle objects. 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 following excerpt from the Gettysburg Address, four TextRectangle objects are contained in the b element (bold text).
<p>Four score and seven years ago <b>our fathers<br>
brought forth . . . a new nation, conceived in liberty<br>
and dedicated to the proposition that all men are<br>
created equal.</b> Now we are engaged in a great civil war . . .
</p>
The four TextRectangle objects are:
- "our fathers"
- "brought forth . . . a new nation, conceived in liberty"
- "and dedicated to the proposition that all men are"
- "created equal"
If you resize the window containing this text, the TextRectangle objects do not update. Since the objects are a snapshot of the layout, the objects should update following after an onresize event occurs.
The width of the TextRectangle may not be identical to the width of the TextRange it contains. A TextRange is only as wide as the text, but a TextRectangle is as wide as the element containing that text.
This object is available in script as of Microsoft Internet Explorer 5.
Examples
The following example shows how to use the getClientRects and getBoundingClientRect methods to highlight text lines in an object.
<head>
<script type="text/javascript">
var rcts;
var keyCount=0;
function Highlight(obj) {
rcts = obj.getClientRects();
rctLength= rcts.length;
if (keyCount > rctLength-1) {
idBeige.style.display="none";
keyCount = 0
}
// set the rendering properties for the yellow div
cdRight = rcts[keyCount].right + idBody.scrollLeft;
cdLeft = rcts[keyCount].left + idBody.scrollLeft;
cdTop = rcts[keyCount].top + idBody.scrollTop;
cdBottom = rcts[keyCount].bottom + idBody.scrollTop;
idYellow.style.top = cdTop;
idYellow.style.width = (cdRight-cdLeft) - 5;
idYellow.style.display = 'inline';
// set the rendering properties for the beige div
bndRight = obj.getBoundingClientRect().right +
idBody.scrollLeft;
bndLeft = obj.getBoundingClientRect().left +
idBody.scrollLeft;
bndTop = obj.getBoundingClientRect().top +
idBody.scrollTop;
idBeige.style.top = bndTop;
idBeige.style.width = (bndRight-bndLeft) - 5;
idBeige.style.height = cdTop - bndTop;
if (keyCount>0){
idBeige.style.display = 'inline';
}
keyCount++;
}
</script>
</head>
<body id="idBody">
<div id="oID_1" >
A large block of text should go here. Click on this block of text multiple times
to see each line highlight with every click of the mouse button. Once each line
has been highlighted, the process will begin again starting with the first line.
</div>
<div style="position: absolute;
left: 5px;
top: 400px;
z-index: -1;
background-color: yellow;
display: none"
id="idYellow">
</div>
<div style="position: absolute;
left: 5px;
top: 400px;
z-index: -1;
background-color: #FFFFCC;
display: none"
id="idBeige">
</div>
</body>
This feature requires Microsoft® Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
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.
<head>
<script type="text/javascript">
var timid = -1;
var timoID_2 = -1;
var nLine;
var nPosInLine;
var oRcts;
var nDivLen;
var nEraser;
function LoadDone() {
oTextRange = document.body.createTextRange();
// Get bounding rect of the range
oRcts = oTextRange.getClientRects();
nLine = 0;
oBndRct = obj.getBoundingClientRect();
nDivLen = oBndRct.right - oBndRct.left + 1;
MoveTo();
}
function MoveTo() {
if (nLine >= oRcts.length) {
nLine = 0;
}
obj.style.top = oRcts[nLine].top;
nPosInLine = oRcts[nLine].left;
nEraser = 0;
timoID_2 = setInterval("MoveToInLine()",60);
}
function MoveToInLine() {
if (nPosInLine >= oRcts[nLine].right - nDivLen) {
clearInterval(timoID_2);
timoID_2 = -1;
obj.style.left = oRcts[nLine].right - nDivLen;
nLine++;
timid = setTimeout("MoveTo()", 100);
return;
}
if (nEraser == 0) {
nEraser = 1;
}
else {
nEraser = 0;
}
im.src = "/workshop/graphics/dot.gif";
obj.style.left = nPosInLine;
nPosInLine += 3;
}
function End() {
if(timid != -1) {
clearInterval(timid);
timid = -1;
}
if(timoID_2 != -1) {
clearInterval(timoID_2);
timoID_2 = -1;
}
}
</script>
</head>
<body id="bodyid" >
<p style="text-align: center"><b>The quick brown fox jumps over the lazy dog.</b></p>
<div id="obj" style="position: absolute">
<img id="im" src="/workshop/graphics/dot.gif" alt="dot" height="16" width="16">
</div>
</body>
This feature requires Microsoft® Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
Standards Information
This object is defined in
HTML 3.2 
.