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

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

border:1px solid black;

или

border:0.25pt solid black;

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

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

Ответ 1

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

Я провел еще несколько тестов и, как представляется, вывод:

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

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

<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 см - самая большая используемая ширина. Высота BODY соответствует высоте страницы.

Safari 5: 0.75pt, выглядит как 1pt. Ширина DIV составляет 18,2 см, а ширина BODY - 19,5 см. Safari, похоже, подходит к странице, даже если нет никаких указаний на то, что это будет сделано. Высота BODY заканчивается вскоре после высоты 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.

Ответ 2

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

Ответ 3

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

SVG (то есть путем назначения пути stroke-width: .5)
линейные градиентные фоны
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

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

p {
  border: 0.4pt solid #CCC;
}

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

Ответ 5

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

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

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

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

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

Ответ 6

Я нашел 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-размерную страницу, которую можно автоматически масштабировать до формата A4 при печати - на этой стадии также не теряются линии линий.

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