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

Приятным дополнением к печатной версии страницы могут стать сноски для ссылок, предложенные Аароном Густафносоном.

Примерно так выглядит распечатанная страница DFM.

Скрипт подготовки ссылок к печати, который предложил Аарон, прекрасно работает, но три экрана кода только для того, чтобы сделать концевые сноски ссылок это слишком. Я уверен, что многие сразу же откажутся от самой идеи сносок, и в чем-то будут правы — печатаются страницы редко, а тут еще и скрипт огромный.

Чтобы отбросить хотя бы эту часть сомнений, я переписал скрипт под jQuery с небольшим сокращением совсем уж редко используемого функционала, получилось на экран с комментариями, и 450 символов в сжатом виде.

/**
 * Создает концевые сноски для ссылок.
 * @param container  селектор элемента содержащего ссылки
 * @param target     селектор элемента в который нужно добавить список ссылок
 * @param title      заголовок списка ссылок
 * @param printClass класс элементов добавляемых функцией
 */
function footnoteLinks(container, target, title, printClass) {
    if(!printClass)
        printClass = 'printOnly';

    var linksArray = [];  // ссылки по порядку
    var linksHash = {};   // индексы по href, для поиска дубликатов
    
    // перебор всех ссылок с атрибутом href
    // в пределах контейнера
    $(container + ' a[href]').each(function(elementIndex) {
        var index = elementIndex;
        
        if(!linksHash[this.href]) {
            // ссылка встречается впервые
            linksHash[this.href] = index;
            linksArray.push(this);
        } else {
            // такая ссылка уже была и ей присвоен индекс
            index = linksHash[this.href];
        }
        
        // добавляем номер сноски после ссылки
        $(this).after('<sup class="' + printClass + '">' + (index + 1) + '</sup>');
    });

    // создание списка с концевыми сносками, если ссылки былы
    var linksFound = linksArray.length;
    if(linksFound > 0) {
        var links = '';

        for(var i = 0; i < linksFound; i++)
            links += '<li>' + linksArray[i].href + '</li>';

        links = '<h2 class="' + printClass + '">' + title + '</h2>' +
                '<ol class="' + printClass + '">' + links + '<ol>';

        $(target).append(links);
        
        // задаем класс для элемента html
        // может быть полезно при написании CSS для печати
        $(document.documentElement).addClass('print-footnote-links');
    }
}

// пример использования
$(document).ready(function() {
    footnoteLinks('.single .post-content', '.post-content', 'Ссылки');
});

Пример страницы (сноски не скрыты)

Теперь скроем сноски. Если стили для всех устройств в одном файле то можно использовать следующее правило:

// лишние устройства можно удалить
@media aural, braille, embossed, handheld, projection, tty, screen, tv {
    .printOnly { display: none; }
}

Если для каждого устройства подключается свой файл стилей, то все еще проще, добавьте .printOnly { display: none; } во все файлы кроме файла стилей для печати.

Чтобы посмотреть еще одни пример используйте «Предварительный просмотр...»

Похожие статьи