[Skip to content]

Search our Site
Easysite Resource Centre
Text Sizing: Style element introduced / legacy solution deprecated (Theme changes required)

Text Sizing: Style element introduced / legacy solution deprecated (Theme changes required)

Description

The legacy JavaScript solution updating text size has been deprecated in favour of a new Easysite based solution allowing extra functionality and flexibility.

The implementation to resize content across Easysite will require updating due to these changes. 

The update will take the dependency for this functionality away from JavaScript and will also allow potential for additional functions by adding properties within the defined element.

If you feel it necessary to include text resizing options, (see our web accessibility page for why it might not be required) then you must now use the new implementation.

At its most basic level this can be implemented with the following line:

<%= StyleElement("TextSize") %>

This will render a series of text resizing links on the page using the element's default settings: 

<div class="sx-element sx-fnt-size">
    <ul id="sx-anchors">
        <li id="sx-fnt-larger" class="sx-fnt-size-item sx-fnt-larger" id="sx-fnt-larger">
            <a href="#">+</a>
        </li>
        <li id="sx-fnt-regular" class="sx-fnt-size-item sx-fnt-regular" id="sx-fnt-regular">
            <a href="#">Regular</a>
        </li>
        <li id="sx-fnt-smaller" class="sx-fnt-size-item sx-fnt-smaller" id="sx-fnt-smaller">
            <a href="#">-</a>
        </li>
    </ul>
</div>

Clicking the + link will add the class .sx-font-large to the body tag. Each time the + link is clicked it will insert an additional x- into the class name (depending on how many levels of resizing are allowed by the element).

The accompanying CSS to make this work might look something like this:

/* Text Size - Increase */
body.sx-fnt-large { font-size: 1.25em; }
body.sx-fnt-x-large { font-size: 1.5em; }
body.sx-fnt-x-x-large { font-size: 1.75em; }

/* Text Size - Decrease */
body.sx-fnt-small { font-size: 0.7em; }
body.sx-fnt-x-small { font-size: 0.6em; }
body.sx-fnt-x-x-small { font-size: 0.5em; }