HTML, печатные ссылки на гиперссылки, такие как оглавление

Question

Ссылка в документе HTML обычно кликабельна.Однако на печатной странице эта функция по естественным причинам недоступна.

<a href="#foo">Link to foo</a>
[... loads of content ...]
<a name="foo"/>Here is foo

Нажатие на ссылку «Ссылка на foo» на экране приведет к прокрутке страницы в нужном месте.Можно ли вместо этого ссылаться на номер страницы, если этот документ напечатан?Я хотел бы сделать, как

<a href="#foo" style="printing: page-reference;">Link to foo</a>

, чтобы он печатал номер страницы вместо подчеркнутого текста «Ссылка на foo».

Возможно ли это, используя HTML 4 или 5, XHTML, CSS 2 или 3, или, может быть, с помощью какого-нибудь необычного JavaScript?

Answer 1

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

Чтобы указать таблицу стилей, применяемую только для печати, используйте @media print. На W3Schools .

написано довольно неплохое описание.

В вашем случае вы можете использовать стили печатных носителей вместе с :before или :after, чтобы добавлять дополнительный текст к определенным элементам только при печати. ​​

Нечто подобное поможет вам:

@media print {
    a[href='#foo'] { text-decoration:none;}
    a[href='#foo']:after { content: "[Ref: 1]";}
    a[name='foo']:before { content: "[1]";}
}

Очевидно, что вы можете изменить текст в содержимом на то, что вам нравится; Я пытался приблизиться к тому, что вы просили.

Существующий контент будет по-прежнему отображаться (хотя я подчеркнул подчеркивание).

Надеюсь, это поможет.

Answer 2

Я обнаружил, что делать то, что я хочу, невозможно.Пожалуйста, поправьте меня, если я ошибаюсь!