Организуем интерфейс для слабовидящих пользователей

Задача: Организовать интерфейс для слабовидящих пользователей с возможностью увеличения и уменьшения. При перезагрузке страницы выбранный размер шрифта не должен сбрасываться.

Решение: Одним из наиболее удобных решений для этой задачи является использование JavaScript фреймворка jQuery. Поскольку он используется в UMI.CMS по-умолчанию нам остаётся написать только небольшой скрипт для управления шрифтом и подключить его к основному шаблону.
Текст скрипта:

$(document).ready(function() {

    // Оригинальный шрифт
    var originalFontSize = $('body').css('font-size');

    // Настройки cookie
    var cookieSettings = {
        expires: 7,
        path: '/',
        name: 'zoomText'    
    };
    
    // Если есть cookie - загружаем настройки шрифта
    if($.cookie != undefined && $.cookie(cookieSettings.name) != null) {
        var size = $.cookie(cookieSettings.name);
        $('body').css({fontSize: size + (size.indexOf('px') != -1 ? '' : 'px')}); // IE fix
    }
    
    // Сброс шрифта
    $('.resetFont').click(function() {
        $('body').css('font-size', originalFontSize);
        $.cookie != undefined ? $.cookie(cookieSettings.name, originalFontSize, cookieSettings) : '';
        return false;
    });
    
    // Увеличение шрифта
    $('.incFont').click(function() {
        var newFontSizeNum = (parseFloat($('body').css('font-size'), 10) * 1.2);
        var newFontSizeStr = newFontSizeNum.toString().slice(0, 4);
        $('body').css('font-size', newFontSizeStr);
        $.cookie != undefined ? $.cookie(cookieSettings.name, newFontSizeStr, cookieSettings) : '';
        return false;
    });
    
    // Уменьшение шрифта
    $('.decFont').click(function() {
        var newFontSizeNum = (parseFloat($('body').css('font-size'), 10) * 0.8);
        var newFontSizeStr = newFontSizeNum.toString().slice(0, 4);
        $('body').css('font-size', newFontSizeStr);
        $.cookie != undefined ? $.cookie(cookieSettings.name, newFontSizeStr, cookieSettings) : '';
        return false;
    });
    
});

Сохраним текст скрипта, например, в файле с названием «zoomtext.js» в папке «/js/». Далее нам нужно подключить скрипт к основному шаблону (например: «default.tpl»). Сделать это можно следующим образом:

<script src="/js/zoomtext.js" type="text/javascript" charset="utf-8"></script>

После чего остаётся только разместить в шаблоне ссылки/кнопки для управления шрифтом:

<div id="zoomText">
    <a class="incFont" href="#">Увеличить шрифт</a>
    <a class="decFont" href="#">Уменьшить шрифт</a>
    <a class="resetFont" href="#">Сбросить шрифт</a> 
</div>