In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > box and rectangle > objects > TextRectangles

TextRectangles collection

Browser support:

	3	9.5	4

Represents a collection of TextRectangle objects that specifies the exact shape of an element or TextRange object.

The TextRectangles collection is supported in Firefox from version 3, in Opera from version 9.5 and in Safari from version 4. Use the offsetLeft, offsetTop, offsetWidth and offsetHeight properties in older versions of Firefox, Opera and Safari.

Each TextRectangle object specifies the bounding rectangle of a single line in pixels, relative to the upper-left corner of the browser's client area. The bounding rectangles include the padding, scrollBar, and the border, but excludes the margin.

Note: Since the shape of a block element is always rectangular, the TextRectangles collection contains only one TextRectangle object for block elements in Firefox, Opera, Google Chrome and Safari. This TextRectangle object specifies the bounding rectangle of the block element.

When the width of a block element is specified, then the TextRectangles collection contains only one TextRectangle object in Internet Explorer, too.

See Example 2 and 3 for details.

Note: Sometimes a single line is represented by more than one TextRectangle object in Internet Explorer. Example 1 illustrates it.

If you need the bounding rectangle of the entire element, use the getBoundingClientRect method.

Syntax:

Methods that return the object:

•

object.getClientRects ( )

Related objects:

TextRange

Related HTML objects:

a, abbr, acronym, address, applet, area, b, bdo, big, blink, blockquote, body, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, hr, html, i, iframe, img, input:button, input:checkbox, input:file, input:image, input:password, input:radio, input:range, input:reset, input:search, input:submit, input:text, ins, isindex, kbd, keygen, label, legend, li, listing, map, marquee, menu, nobr, noframes, object, ol, optgroup, option, p, plaintext, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, xmp

The base interface, through which you can add new functionalities to the TextRectangles collection, is the ClientRectList interface.

Possible members:

Properties:

length

Returns an integer that specifies the number of objects in the current collection.

This property is read-only.

Methods:

[index]

Returns an object from the current collection by index.

Parameters:

index

Required. Zero-based integer that specifies the position of object to retrieve.

Return value:

Returns a TextRectangle object.

item (index)

Returns an object from the current collection by index.

Parameters:

index

Required. Zero-based integer that specifies the position of object to retrieve.

Return value:

Returns a TextRectangle object.

Example HTML code 1:

This example illustrates the use of the TextRectangles collection for an inline element:

<head>
    <script type="text/javascript">
        function GetShape () {
            var shapeTestObj = document.getElementById ("shapeTest");
            var message = "";
            if (shapeTestObj.getClientRects) {        // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
                var rects = shapeTestObj.getClientRects ();
                for (i = 0; i < rects.length; i++) {
                    var rect = rects[i];
                    message += "top: " + rect.top + 
                               ", bottom: " + rect.bottom + 
                               ", left: " + rect.left + 
                               ", right: " + rect.right + "<br />";
                }
            }
            else {
                message = "Your browser does not support this example!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetShape ()">
    <span id="shapeTest">
        You can see the exact shape of this element in the green field below.<br />
        This line is represented by two TextRectangle objects in Internet Explorer.
    </span>
    <br /><br /><br />
    <div id="info" style="background-color:#c0e0b0;"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the TextRectangles collection for a block element:

<head>
    <script type="text/javascript">
        function GetShape () {
            var shapeTestObj = document.getElementById ("shapeTest");
            var message = "";
            if (shapeTestObj.getClientRects) {        // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
                var rects = shapeTestObj.getClientRects ();
                for (i = 0; i < rects.length; i++) {
                    var rect = rects[i];
                    message += "top: " + rect.top + 
                               ", bottom: " + rect.bottom + 
                               ", left: " + rect.left + 
                               ", right: " + rect.right + "<br />";
                }
            }
            else {
                message = "Your browser does not support this example!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetShape ()">
    <div id="shapeTest">
        You can see the exact shape of this element in the green field below.<br />
        The TextRectangles collection, returned by the getClientRects method, 
        contains only one TextRectangle object in Firefox, Opera, Google Chrome and Safari.<br />
        This object represents the bounding rectangle of the entire element.
    </div>
    <br /><br /><br />
    <div id="info" style="background-color:#c0e0b0;"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the TextRectangles collection for a block element with specified width:

<head>
    <script type="text/javascript">
        function GetShape () {
            var shapeTestObj = document.getElementById ("shapeTest");
            var message = "";
            if (shapeTestObj.getClientRects) {        // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
                var rects = shapeTestObj.getClientRects ();
                for (i = 0; i < rects.length; i++) {
                    var rect = rects[i];
                    message += "top: " + rect.top + 
                               ", bottom: " + rect.bottom + 
                               ", left: " + rect.left + 
                               ", right: " + rect.right + "<br />";
                }
            }
            else {
                message = "Your browser does not support this example!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetShape ()">
    <div id="shapeTest" style="width:450px">
        You can see the exact shape of this element in the green field below.<br />
        The TextRectangles collection, returned by the getClientRects method, 
        contains only one TextRectangle object.<br />
        This object represents the bounding rectangle of the entire element.
    </div>
    <br /><br /><br />
    <div id="info" style="background-color:#c0e0b0;"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

External links:

TextRectangles (MSDN)
TextRectangles (Mozilla Developer Center)

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

TextRectangles collection

Syntax:

Possible members:

Parameters:

Return value:

Parameters:

Return value:

Example HTML code 1:

Example HTML code 2:

Example HTML code 3:

External links:

Post Content