1 out of 6 rated this helpful - Rate this topic

TextRectangle Object

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.

Attributes/Properties

Property Description

bottom Set or retrieves the bottom coordinate of the rectangle surrounding the object content.

height Gets the height of the rectangle that surrounds 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.

width Gets the width of the rectangle that surrounds the object content.

Prototypes

Object Description

TextRectangle Constructor Defines the properties and methods inherited by objects in the TextRectangle Constructor prototype chain.

Property	Description
bottom	Set or retrieves the bottom coordinate of the rectangle surrounding the object content.
height	Gets the height of the rectangle that surrounds 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.
width	Gets the width of the rectangle that surrounds the object content.

Object	Description
TextRectangle Constructor	Defines the properties and methods inherited by objects in the TextRectangle Constructor prototype chain.

Remarks

Apply the getClientRects method to an element or text range object to get 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.

The following sentences contain each letter of the English alphabet. Each sentence contains a TextRectangle object defined by a em element.
Copy
The quick brown fox jumps over the lazy dog.
Bright vixens jump; dozy fowl quack.
Deft zebras jump quickly; how vexing!
Verily! Bad quacks might jinx a zippy fowl.
The four TextRectangle objects are:
"brown fox"
"Bright vixens"
"Deft zebras"
"zippy fowl"
If you resize the window that contains this text, the TextRectangle objects do not update. Because the objects are a snapshot of the layout, the objects should update 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 BADFOOD is as wide as the element that contains that text.
Internet Explorer 9. When webpages are displayed in IE9 Standards mode, the TextRange object also supports properties that return the height and the width of the object.
This object is available in script as of Microsoft Internet Explorer 5.
The TextRange object supports properties that return the height and the width of the object.

Examples

The following example shows how to use the getClientRects and getBoundingClientRect methods to highlight text lines in an object.

Copy


<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" onclick="Highlight(this)" onkeydown="Highlight(this)">
	A large block of text should go here. Click this block of text multiple times 
	to see each line highlight with every click of the mouse button. After 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>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/rectselection.htm

This example uses theTextRectangle 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.

Copy


<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" onload="LoadDone()" onresize="End();LoadDone();" onunload="End()">

<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>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/rectdemo.htm

Standards Information

This object is defined in HTML 3.2.

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)

Community Content Add

FAQ