Покращуємо посилання для друку веб-сторінок за допомогою JavaScript

45

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

У цьому невеликому уроці ви дізнаєтеся, як захоплювати подія друку з допомогою JS і динамічно вставляти контент тільки для принтерів. У вікні браузера цей контент видно не буде.

Заповнюємо сторінку

Припустимо, що контент сторінки знаходиться всередині тега article:

Prairie dogging. Table the discussion pull
in ten extra bodies to help roll the tortoise win-win-win data point we want to
see more charts we need a paradigm shift…

До розмітці я додам звичайні стилі:

article {
max-width: 40rem;
margin: 3rem auto 0;
}
article p {
font-size: 1.4 rem;
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 += «»+(i + 1)+»»;
var footnote = document.createElement(«li»);
footnote.innerText = articleLinks.href;
footnotes.appendChild(footnote);
}
footer.appendChild(footnotes);
}
}
});

Тестуємо результат

З цим скриптом є одна складність – його роботу можна перевірити тільки, відкривши сторінку. Але, насправді, є і інші способи перевірки, і для цього нам не доведеться знищувати дерева:

змініть подія або CSS: можна замінити подія на майже будь-яке інше, а також закоментувати CSS медіа запит, щоб зробити результат видимим в браузері, як це зробив я на початку статті;

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

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