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

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

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

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

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

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

<article>
  <p>Prairie dogging. <a href="http://thenewcode.com">Table the discussion</a> pull 
  in ten extra bodies to help roll the tortoise win-win-win data-point we want to 
  see more charts we need a <a href="http://codepen.io">paradigm shift</a>…
</article>

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

article {
  max-width: 40rem;
  margin: 3rem auto 0;
}
article p {
  font-size: 1.4rem;
  line-height: 1.5;
}
article a {
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #000;
}

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

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

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

Узнать подробнее
article sup { 
  line-height: 0;
  padding-left: .2rem;
  font-size: 1rem;
}
sup, footer { 
  display: none;
}

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

@media print {
  sup { display: inline; }
  footer { display: block; }
}

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

let article = document.querySelector("article");

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

let printEvent = window.matchMedia("print");

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

printEvent.addListener(function(mql) {
 if (mql.matches && !document.body.matches(".printed")) {
 document.body.classList.add("printed");
 let articleLinks = article.getElementsByTagName("a");
 if (articleLinks.length > 0) {
 var footer = document.createElement("footer");
 article.appendChild(footer);
 var footnotes = document.createElement("ol");
 for (let i = 0; i < articleLinks.length; i++) {
 articleLinks.innerHTML += "<sup>"+(i + 1)+"</sup>";
 var footnote = document.createElement("li");
 footnote.innerText = articleLinks.href;
 footnotes.appendChild(footnote);
 }
 footer.appendChild(footnotes);
 }
 } 
});

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

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

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

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

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

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

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

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

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

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree