Techniques for WCAG 2.0

On this page:

-

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

## Applicability

Client-side scripting.

This technique relates to:

- Success Criterion 1.4.4 (Resize text)
  - How to Meet 1.4.4 (Resize text)
  - Understanding Success Criterion 1.4.4 (Resize text)
- Success Criterion 1.4.8 (Visual Presentation)
  - How to Meet 1.4.8 (Visual Presentation)
  - Understanding Success Criterion 1.4.8 (Visual Presentation)

## User Agent and Assistive Technology Support Notes

Calculating size and position can be complex and different browsers can produce different results. This can occur when the CSS styling mixes padding, margins and widths for an object, or when it mixes an offset and plain value, e.g., offsetWidth and width. Some of these behave differently in reaction to zooming. See MSDN: Fix the Box Instead of Thinking Outside It for an explanation of the way that Internet Explorer 6 and later differ from earlier versions of Internet Explorer.

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

### Example 1

The Javascript function:

Example Code:

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

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

        return iOffset;
    }

The following example illustrates using the function above by aligning an object beneath a reference object, the same distance from the left:

Example Code:

    // 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';

## Resources

Resources are for information purposes only, no endorsement implied.

- MSDN: Fix the Box Instead of Thinking Outside It

## Related Techniques

- C12: Using percent for font sizes
- C14: Using em units for font sizes
- C17: Scaling form elements which contain text
- C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized
- C24: Using percentage values in CSS for container sizes
- C26: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text

## Tests

### Procedure

1. Open a page that is designed to adjust container sizes as text size changes.

2. Increase the text size up to 200% using the browser's text size adjustment (not the zoom feature).

3. Examine the text to ensure the text container size is adjusted to accommodate the size of the text.

4. Ensure that no text is "clipped" or has disappeared as a result of the increase in text size.

### Expected Results

- Checks #3 and #4 are true.

- Top
- Contents
- Intro
- Previous: Technique SCR33
- Next: Technique SCR35