Spécifiez l'épaisseur des cheveux dans CSS pour l'impression
Si j'ai une impression le style CSS d'un élément:
border:1px solid black;
ou:
border:0.25pt solid black;
La ligne est très épais lors de l'impression – au moins 1pt. Si je cherche une beaucoup plus petite valeur, tels que 0,05 pt, la ligne n'apparaît pas à tous. Comment puis-je obtenir une fine ligne? Dans les programmes tels que InDesign, vous définissez l'épaisseur de 0,25 pt pour un 'filet', c'est à dire une ligne très mince mais pas si mince qu'il ne sera pas imprimable.
Remarque: cette question semble se poser la même chose, mais personne n'a abordé le problème réel de l'épaisseur de la ligne, simplement le meilleur des unités de mesure à utiliser:
pt ou px pour la spécification de border-width pour l'impression
source d'informationauteur user535673
Vous devez vous connecter pour publier un commentaire.
Merci pour votre aide. Il semblerait que les navigateurs sont tout à fait inutiles à cet égard.
J'ai fait quelques tests supplémentaires et la conclusion semble être:
J'ai testé les variations de la page web suivante, en ajustant le point de la frontière de la taille à chaque fois. J'ai imprimé avec "adapter à la page" éteint.
Ce sont les résultats de la imprimable minimum une taille de point et à quoi il ressemble, comparativement à un imprimé de lignes à partir d'InDesign. J'ai inclus quelques autres notes, trop:
FF: 0.25 pt, ressemble à 1,25 pt. DIV largeur dirait qu'il est de 17cm, mais à cause de FF massive des marges d'impression la droite de la bordure coupée. Il semble 16,5 cm est la plus grande largeur utilisable. Le CORPS hauteur correspond à la hauteur de la page.
Safari 5: 0.75 pt, ressemble à 1pt. DIV largeur est de 18.2 cm et la largeur du CORPS est de 19,5 cm - Safari semble être l'ajustement à la page, même si il n'y a aucune indication que ce serait le faire. La hauteur du CORPS se termine peu après la DIV hauteur.
Opera 11: 0.4 pt, ressemble à 0,75 pt. DIV largeur est de 16,2 cm et le CORPS d'arrière-plan ne s'affiche dans le div - bien que la ligne de texte apparaît sur un fond blanc
IE7: 0.4 pt, ressemble 0,5 pt (comme le fait 0,5 pt). Comme avec FF, DIV largeur dirait qu'il est de 17cm, mais à cause d'IE massif de marges d'impression la droite de la bordure coupée.
IE9: 0.1 œuvres (et éventuellement plus faible), mais ressemble encore de 0,5 pt. Sinon même comme IE7.
J'ai trouvé à l'aide d'une épaisseur de
dotted
au lieu desolid
a aidé un peu l'impression de scénarios et la rend que plus d'un diluant (cheveux) ligne de points.Aujourd'hui, en 2015, il y a quelques solutions de contournement pour produire des traits fins avec HTML5 et CSS3, par exemple, pour l'impression ou à haute résolution des écrans:
stroke-width: .5
)La de mise à l'échelle approche est décrite en détail dans cet article. Il se résume à ceci:
La dégradé linéaire méthode fonctionne le long de ces lignes (pun intended, en détail ici):
Pour simplifier les choses, j'ai utilisé un 1px
<hr>
élément comme un exemple. Mais par la mise à l'échelle de tous les styles à l'intérieur d'un élément, ou avec des arrière-plans multiples, respectivement, les deux solutions peuvent être étendus de manière à fonctionner comme une bordure sur les quatre côtés d'un élément.Problème est peut-être dans le navigateur, changer la taille de la page (au moins IE l'habitude de le faire lors de l'impression), mais comme je l'ai déjà testé à l'Opéra (pas de remettre à l'échelle), la ligne n'est pas encore vraiment mince que le délié. Cependant, je suis toujours à l'aide de cette fonction pour obtenir mince frontière effet:
Cela permettra de créer très léger, à bordure grise. Comme Barry Kaye a proposé, vous pouvez aussi le faire
dotted
paraître plus mince.Je suggère d'utiliser un outil qui convertit le document au format HTML au format PDF en premier. Ensuite, vous pouvez imprimer le PDF et obtenir des résultats cohérents. Wkhtmltopdf est très bon pour cela, car il est basé sur les plus conformes à la norme moteur de rendu web.
Lors de l'utilisation de wkhtmltopdf vous pouvez régler le zoom sur une valeur supérieure à 1 pour obtenir des lignes plus fines.
Définissez la largeur de ligne pour quelque chose comme
0.25pt
et utilisez la commande suivante.Maintenant, vous obtenez de très fines lignes. Lorsque vous spécifiez une valeur de zoom plus élevé que le rendu est plus précis et ne semble donc légèrement différente.
Pour obtenir les meilleurs résultats, utilisez les unités suivantes: mm, cm et pt au lieu de px.
J'ai trouvé B. Martin's réponse la plus utile. Voici ce que je peux ajouter:
Théorie
Physiquement la largeur d'un cheveu (hairwidth) est comprise entre 17 et 181 microns.
C'est de 0,02 à 0,2 mm 0,05 à 0,5 pt.
Afin de faire des lignes plus étroite que 0,1 pt n'a pas beaucoup de sens, parce que l'œil ne pourrait pas les voir.
CorelDraw cuir chevelu est de 0,23 pt ou 81 micron.
Pratique
En fait,
wkhtmltopdf
outil est utile pour la création des lignes fines. J'ai réussi à atteindre les largeurs suivantes:Je n'ai pas la mesure réelle de la largeur de la ligne, mais il semble à peu près la même que la "délié" de mon CorelDraw.
NB Modification de la largeur de 0.1 pt à 0,15 pt (zoom=8) ou de 0,2 pt 0,3 pt (zoom=4) ne change pas la ligne de largeur, au moins visuellement.
Donc, de ce que j'ai est la suivante:
donne une jolie A0-page de format qui peut être automatiquement mis à l'échelle de retour à A4 lors de l'impression - pas de hairwidth lignes sont perdus sur cette étape en tant que bien.
Mise à jour:
J'ai enfin réussi à le mesurer à l'aide d'un plugin Acrobat: original 0,3 pt ligne après
-s A0 --zoom 4
devient de 0,6 pt sur a0 (qui est de 0,15 pt après la réduction des effectifs) qui est tout à fait assez de cheveux pour moi.