От автора: в мире печатных стилей была устоявшаяся техника по раскрытию URL в тексте, ссылки вставлялись инлайново. Все работает, но нарушается порядок чтения. В типографике уже на протяжении минимум века есть более подходящее решение – сноска. Наша задача — создать и вставить сноску с помощью JavaScript.
В этом небольшом уроке вы узнаете, как захватывать событие печати с помощью JS и динамически вставлять контент только для принтеров. В окне браузера этот контент виден не будет.
Заполняем страницу
Предположим, что контент страницы находится внутри тега article:
|
1 2 3 4 5 |
<article> <p>Prairie dogging. <a href="//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="//codepen.io">paradigm shift</a>… </article> |
К разметке я добавлю самые обычные стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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 и по умолчанию невидно:
|
1 2 3 4 5 6 7 8 |
article sup { line-height: 0; padding-left: .2rem; font-size: 1rem; } sup, footer { display: none; } |
Сноски становятся видимыми при событии print, это прописывается в @media запросе:
|
1 2 3 4 |
@media print { sup { display: inline; } footer { display: block; } } |
Первая задача нашего JS кода, который будет добавлен после HTML контента – это выбрать этот элемент:
|
1 |
let article = document.querySelector("article"); |
Далее необходимо поймать событие print. Для этого мы возьмем JS эквивалент @media запросу из CSS matchMedia:
|
1 |
let printEvent = window.matchMedia("print"); |
Ниже мы вставим обработчик события, который будет ловить событие print, вставлять класс printed в тег body, просеивать ссылки в теге article, вставлять номер с инкрементом после каждой ссылки и вставлять такой же номер в теге footer с разъяснением ссылки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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[i].innerHTML += "<sup>"+(i + 1)+"</sup>"; var footnote = document.createElement("li"); footnote.innerText = articleLinks[i].href; footnotes.appendChild(footnote); } footer.appendChild(footnotes); } } }); |
Тестируем результат
С этим скриптом есть одна сложность – его работу можно проверить только, распечатав страницу. Но, на самом деле, есть и другие способы проверки, и для этого нам не придется губить деревья:
смените событие или CSS: можно заменить событие на почти любое другое, а также закомментировать CSS медиа запрос, чтобы сделать результат видимым в браузере, как это сделал я в начале статьи;
можно ничего не менять, проверьте результат в браузере, в котором есть предпросмотр печати, например, Chrome;
в панели разработчика Chrome перейдите на вкладку More Tools / Rendering в боковом меню и разместите страницу для эмуляции CSS медиа запроса для печати.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
