IMfO.ru

All God’s chillun got shoes

CSS: print version and links

В Mozilla относительные ссылки таковыми и остаются, в Opera — становятся абсолютными. Кому надо, тот придумает hack.

Пока не тестировалось, но особых граблей не вижу.

» source

Грабли-то есть. Вспомнил я об этом посте после ознакомления с «Частыми вопросами» версии для печати на seminar@npj.

Год назад я собирался написать HTC, написал её сейчас. Однако, обо всём по порядку.

Грабли № 1: Mozilla

Всё-таки я недооценил проблему относительных ссылок. В статье «CSS Design: Going to Print» Eric Meyer рекомендует следующую технику:

a[href^="/"]:after {
  content: " (http://example.com" attr(href) ") ";
}

Но, как и написано на ALA, это лишь частичное решение проблемы, т.к. не обязательно относительная ссылка начнётся слэшем, а если ещё вспомнить base href…

Грабли № 2: IE

Приходится использовать IE-only методы onbeforeprint и onafterprint. Чтобы не тревожить остальные браузеры, не нагружать их пользователей дополнительными скриптами и не пугать валидатор, пишем HTC и прикручиваем следующим образом:

HTML:

<!--[if IE]>
<style>
  body { behavior: url("print.htc"); }
</style>
<![endif]-->

HTC:

<public:component/>
<public:attach event="onbeforeprint"
        onevent="beforePrint()" for="window"/>
<public:attach event="onafterprint"
        onevent="afterPrint()" for="window"/>
<script>
  var docLinks = element.document.links;
  var docLinksCount = docLinks.length;
  var i;

  function beforePrint() {
    for (i = docLinksCount; --i >= 0;)
    {
      docLinks[i].innerBeforePrint = docLinks[i].innerHTML;
      docLinks[i].innerHTML += ' <span class="iePrintLink">'
                            + '(' + docLinks[i].href + ')'
                            + '</span>';
    }
  }
  
  function afterPrint() {
    for (i = docLinksCount; --i >= 0;)
      docLinks[i].innerHTML = docLinks[i].innerBeforePrint;
  }
</script>

Правда, эта компонента отказалась работать в IE младше шестой версии, если на машине их установлено несколько штук. Думаю, что в «чистых» должно работать. К сожалению, проверить не смог, т.к. в последние дни IE5 не встречал.

Конечный CSS (вне условного комментария):

<style type="text/css" media="print">
  .iePrintLink,
  a[href]:after {
    content: " (" attr(href) ") ";
  }
  /* + если ссылки начинаются со слэша, то: */
  a[href^="/"]:after {
    content: " (http://example.com" attr(href) ") ";
  }
</style>

Конструкция a[href] отсеивает якоря (<a name="name">).

Прочие грабли

Ко всему вышеперечисленному нужно добавить, что при помощи одного лишь CSS не получится управлять переносом длинных ссылок. Таким образом, использование данного метода оправдывает себя лишь в частных случаях и/или тогда, когда разработчик старается облегчить жизнь пользователям, которые не утруждают себя поиском специальных «печатных» ссылок.

Небольшой пример.

Categories: CSS | comments: (3)

Комментарии

Комментарии временно отключены.