Улучшаем ссылки для печати веб-страниц с помощью JavaScript

Улучшаем ссылки для печати веб-страниц с помощью JavaScript

От автора: в мире печатных стилей была устоявшаяся техника по раскрытию URL в тексте, ссылки вставлялись инлайново. Все работает, но нарушается порядок чтения. В типографике уже на протяжении минимум века есть более подходящее решение – сноска. Наша задача — создать и вставить сноску с помощью JavaScript.

В этом небольшом уроке вы узнаете, как захватывать событие печати с помощью JS и динамически вставлять контент только для принтеров. В окне браузера этот контент виден не будет.

Заполняем страницу

Предположим, что контент страницы находится внутри тега article:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

К разметке я добавлю самые обычные стили:

Сноски будут вставляться инлайново с помощью тега sup, а их объяснение будет находиться под статьей в footer. Все это задано в CSS и по умолчанию невидно:

Сноски становятся видимыми при событии print, это прописывается в @media запросе:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Первая задача нашего JS кода, который будет добавлен после HTML контента – это выбрать этот элемент:

Далее необходимо поймать событие print. Для этого мы возьмем JS эквивалент @media запросу из CSS matchMedia:

Ниже мы вставим обработчик события, который будет ловить событие print, вставлять класс printed в тег body, просеивать ссылки в теге article, вставлять номер с инкрементом после каждой ссылки и вставлять такой же номер в теге footer с разъяснением ссылки:

Тестируем результат

С этим скриптом есть одна сложность – его работу можно проверить только, распечатав страницу. Но, на самом деле, есть и другие способы проверки, и для этого нам не придется губить деревья:

смените событие или CSS: можно заменить событие на почти любое другое, а также закомментировать CSS медиа запрос, чтобы сделать результат видимым в браузере, как это сделал я в начале статьи;

можно ничего не менять, проверьте результат в браузере, в котором есть предпросмотр печати, например, Chrome;

в панели разработчика Chrome перейдите на вкладку More Tools / Rendering в боковом меню и разместите страницу для эмуляции CSS медиа запроса для печати.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

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

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree