Technique SCR34:Calculating size and position in a way that scales with text size

Applicability

Client-side scripting.

This technique relates to:

• 1.4.4: Resize text (Sufficient when used with Ensuring that text containers resize when the text resizes AND using measurements that are relative to other measurements in the content by using one or more of the following techniques: Techniques for text container resizing)
• 1.4.8: Visual Presentation (Sufficient when used with G146: Using liquid layout)
• 1.4.10: Reflow (Sufficient)

Description

The objective of this technique is to calculate the size and position of elements in a way that will scale appropriately as the text size is scaled.

There are four properties in JavaScript that help determine the size and position of elements:

• offsetHeight (the height of the element in pixels)
• offsetWidth (the width of the element in pixels)
• offsetLeft (the distance of the element from the left of its parent (offsetParent) in pixels)
• offsetTop (the distance of the element from the top of its parent (offsetParent) in pixels)

Calculating the height and width using offsetHeight and offsetWidth is straightforward, but when calculating an object's left and top position as absolute values, we need to consider the parent element. The calculatePosition function below iterates through all of an element's parent nodes to give a final value. The function takes two parameters; objElement (the name of the element in question), and the offset property (offsetLeft or offsetTop):

Examples

function calculatePosition(objElement, strOffset)
{
    var iOffset = 0;

    if (objElement.offsetParent)
    {
        do 
        {
            iOffset += objElement[strOffset];
            objElement = objElement.offsetParent;
        } while (objElement);
    }

    return iOffset;
}

// Get a reference object
var objReference = document.getElementById('refobject');
// Get the object to be aligned
var objAlign = document.getElementById('lineup');

objAlign.style.position = 'absolute';
objAlign.style.left = calculatePosition(objReference, 'offsetLeft') + 'px';
objAlign.style.top = calculatePosition(objReference, 'offsetTop') + objReference.offsetHeight + 'px'; 

Other sources

No endorsement implied.

• MSDN: Fix the Box Instead of Thinking Outside It

Related Techniques

• C12
• C14
• C17
• C20
• C24
• G206

Tests