Укажите толщину линии в CSS для печати - PullRequest
Новая
       24

Укажите толщину линии в CSS для печати

14 голосов
/ 02 апреля 2012

Если у меня есть CSS-стиль для печати элемента с: 

border:1px solid black;

или 

border:0.25pt solid black;

Линия при печати очень толстая - не менее 1pt. Если я попробую намного меньшее значение, например 0.05pt, строка не появится вообще. Как я могу получить тонкую линию? В таких программах, как InDesign, вы устанавливаете толщину 0,25pt для «линии роста волос», то есть очень тонкой линии, но не настолько тонкой, чтобы ее нельзя было печатать.

Примечание: этот вопрос, кажется, задает то же самое, но никто не обратился к актуальной проблеме толщины линии, просто к лучшим единицам измерения для использования: pt или px для указания ширины границы для печати

Ответы [ 6 ]

11 голосов
/ 04 апреля 2012

Спасибо за вашу помощь.Казалось бы, браузеры просто бесполезны в этом отношении.

Я провел еще несколько тестирований, и вывод выглядит следующим образом:

  • Ни один браузер не подходит для печати размеров точек.
  • Вы не можете предполагать, что пользователи увидят ширину менее 1,25pt на распечатке.

Я тестировал варианты следующей веб-страницы, каждый раз корректируя размер границы.,Я напечатал с выключенным «Подгонка к странице». 

<html>
  <body style="width:17cm; background-color:rgb(245,245,245);">
    <div style="border:0.3pt solid black; width:100%; height:20cm">IE 0.3pt</div>
  </body>
</html>

Это результаты минимального размера печатаемой точки и того, как она выглядит по сравнению с распечаткой строк из InDesign.Я также включил несколько других заметок:

FF: 0.25pt, выглядит как 1.25pt.Ширина DIV выглядит, как будто она составляет 17 см, но из-за огромных полей печати FF правая граница обрезается.Кажется, 16,5 см - самая большая полезная ширина.Высота тела соответствует высоте страницы.

Safari 5: 0.75pt, выглядит как 1pt.Ширина DIV составляет 18,2 см, а ширина ТЕЛА - 19,5 см - Safari, кажется, подходит для страницы, хотя нет никаких признаков того, что он это сделает.Высота тела заканчивается вскоре после высоты DIV.

Opera 11: 0.4pt, выглядит как 0.75pt.Ширина DIV составляет 16,2 см, а фон BODY появляется только внутри div - хотя текстовая строка появляется на белом фоне

IE7: 0.4pt, выглядит как 0.5pt (как и 0.5pt).Как и в случае с FF, ширина DIV выглядит как 17 см, но из-за больших полей печати IE правая граница обрезается.

IE9: 0.1 работает (и, возможно, ниже), но все равно выглядит как 0.5pt,В остальном такой же, как IE7.

6 голосов
/ 18 ноября 2015

В настоящее время, в 2015 году, существует несколько обходных путей для создания хайлингов с HTML5 и CSS3, например. для печати или на экранах высокого разрешения:

  1. SVG (т.е. путем назначения пути stroke-width: .5)
  2. линейные градиентные фоны
  3. 2D преобразования: масштабирование

Подход масштабирование подробно описан в этой статье . Это сводится к этому: 

hr.thin {
    height: 1px;
    border-top: none;
    border-bottom: 1px solid black;
    transform: scaleY(0.33);
}

Метод линейного градиента работает по этим направлениям (каламбур, подробно здесь ): 

hr.hairline {
    height: 1px;
    background: linear-gradient(
        transparent 0%, 
        transparent 50%, 
        black 50%, 
        black 100%);
}

Для упрощения я использовал в качестве примера элемент 1px <hr>. Но путем масштабирования всех стилей внутри элемента или с несколькими фонами соответственно, оба решения могут быть расширены для работы в качестве границы на всех четырех сторонах элемента.

4 голосов
/ 02 апреля 2012

Я обнаружил, что использование толщины dotted вместо solid помогло в некоторых сценариях печати и отрисовало более тонкую (волосяную) линию, чем точки.

3 голосов
/ 29 мая 2012

Возможно, проблема в том, что браузер перемасштабирует страницу (по крайней мере, IE раньше делал это при печати), но, как я сейчас тестировал в Opera (без перемасштабирования), линия по-прежнему не очень тонкая, как линия роста волос.Однако, я всегда использую это для достижения эффекта тонкой границы: 

p {
  border: 0.4pt solid #CCC;
}

Это создаст очень светло-серую границу.Как предложил Барри Кэй, вы также можете сделать его dotted, чтобы выглядеть тоньше.

1 голос
/ 21 апреля 2015

Я нашел B.Martin наиболее полезным ответ.Вот что я могу добавить к этому:

Теория

Физически ширина волоса (ширина волос) составляет от 17 до 181 микрона.Это от 0,02 до 0,2 мм или от 0,05 до 0,5 пт.

Таким образом, делать линии более узкими, чем 0,1pt, не имеет особого смысла, поскольку глаз может их не видеть.

Волосность CorelDraw составляет 0,23pt или 81 микрон.

Практика

На самом деле, инструмент wkhtmltopdf удобен для создания тонких линий.Мне удалось получить следующие значения ширины:

  • 0,1pt с коэффициентом масштабирования 8
  • 0,2pt с коэффициентом масштабирования 4 (что более практично, поскольку a4 масштабируется дообщий размер a0 в данном случае)

Я не измерял реальную ширину линии, но она выглядит почти так же, как «линия роста волос» моего CorelDraw.

NB Изменениеширина от 0,1pt до 0,15pt (zoom = 8) или от 0,2pt до 0,3pt (zoom = 4) не меняет результирующую ширину линии, по крайней мере визуально.

Итак, что япоставляется с: 

wkhtmltopdf -s A0 --zoom 4 <input filename> <output filename>

дает симпатичную страницу размера A0, которая может автоматически уменьшаться до А4 при печати - на этом этапе также не теряются линии ширины волос.

Обновление: Мне наконец-то удалось измерить его с помощью плагина Acrobat: исходная линия 0.3pt после -s A0 --zoom 4 становится 0.6pt на a0 (то есть 0.15pt после сокращения), что для меня вполне достаточно.

1 голос
/ 22 ноября 2013

Я предлагаю использовать инструмент, который сначала преобразует HTML-документ в PDF. Затем вы можете распечатать PDF-файл и получить согласованные результаты. Wkhtmltopdf очень хорош для этого, потому что он основан на самом стандартном совместимом движке веб-рендеринга.

При использовании wkhtmltopdf вы можете установить масштабирование на значение выше 1, чтобы получить более тонкие линии. Установите ширину линии, например, 0.25pt и используйте следующую команду. 

wkhtmltopdf -T 0 -B 0 -L 0 -R 0 -s A4 --zoom 10 <URL> <output filename>

Теперь вы получаете действительно тонкие линии. Когда вы указываете более высокое значение масштабирования, рендеринг становится более точным и поэтому выглядит немного иначе.

Для получения наилучших результатов используйте следующие единицы: мм, см и пт вместо px.

...