Home-theater-designers
Si alguna vegada heu imprès les reserves d’entrades o les indicacions a un hotel des del web, probablement no us hagin impressionat els resultats. Per tant, pot ser que no sàpiga que els documents impresos es poden dissenyar de la mateixa manera que es poden fer a la pantalla, mitjançant fulls d’estil en cascada (CSS).
Separació de les preocupacions
Un dels avantatges clau de CSS és la separació del contingut de la presentació. En termes més senzills, això significa, en lloc d'un marcatge estilístic molt passat de moda, com ara:
Heading
Utilitzem el marcatge semàntic:
Això no només és molt més net, sinó que també significa que la nostra presentació està separada del nostre contingut. Representació dels navegadors h1 elements com a text en negreta gran, per defecte, però podem canviar aquest estil en qualsevol moment amb un full d'estil:
h1 { font-weight: normal; }
Reunint aquestes declaracions d’estil en un fitxer separat i fent referència a aquest fitxer del nostre document HTML, podem fer un ús encara millor de la separació. El full d'estil es pot tornar a utilitzar i podem canviar aquest fitxer en qualsevol moment per actualitzar el format de tots els documents que l'utilitzen.
Inclou un full d’estil d’impressió
De manera similar a la inclusió d’un full d’estil de pantalla, podem especificar un full d’estil per imprimir. Normalment, s'inclou un full d'estil de pantalla:
No obstant això, un atribut addicional, mitjana , permet l'orientació en funció del context en què es representa el document. Per defecte, l'element anterior equival a:
Això significa que el full d'estil s'aplicarà a qualsevol mitjà en què es reprodueixi el document. Tanmateix, l'atribut de suport també pot prendre valors d'impressió i pantalla:
En aquest exemple, el fitxer print.css el full d’estil només s’utilitzarà quan s’imprimeixi el document. Aquest és un mecanisme molt útil. Podem reunir tots els estils habituals (potser la família de tipus de lletra o l’interlineat) en un full d’estil que s’aplica a tots els suports i el format específic del mitjà en fulls d’estils individuals. De nou, aquest és un altre ús de la separació de preocupacions.
Alguns exemples de declaracions d'estil
Un fons net
Gairebé segur que no voleu perdre la tinta imprimint un fons de colors o una imatge de fons. Comenceu per restablir els valors predeterminats d'aquests valors que s'hagin pogut establir al document:
body {
background: white;
color: black;
}
També és possible que vulgueu evitar que s’imprimeixin imatges de fons: aquestes haurien de ser decoratives i, per tant, no ser una part obligatòria del vostre contingut:
* {
background-image: none !important;
}
Relacionat: Com definir una imatge de fons a CSS
com trobar disc dur extern a la PC
Control de marges
Un altre punt obvi que cal tenir en compte pel que fa a la impressió és el marge de la pàgina. Tot i que CSS proporciona un mitjà per establir la mida del marge, heu de tenir en compte que el vostre navegador i la vostra impressora també poden influir en la configuració del marge.
Per exemple, al quadre de diàleg d'impressió de Chrome hi ha una configuració de marge amb valors inclosos cap i personalitzat que anul·larà tot allò especificat mitjançant CSS:
Per aquest motiu, es recomana deixar decisions de marge al lector a les pàgines web públiques. No obstant això, per a ús personal o per crear un disseny per defecte, pot ser adequat establir marges d’impressió mitjançant CSS. El @pàgina La regla permet establir marges i s'ha d'utilitzar de la següent manera:
@page {
margin: 2cm;
}
CSS també té capacitat per a dissenys d’impressió més sofisticats, com ara variar el marge segons si la pàgina és imparella (dreta), parella (esquerra) o la portada.
com reduir la mida d'un jpg
Malauradament, això no s’admet malament, sobretot l’opció de portada, però es pot utilitzar en una mínima mesura. Els següents estils produeixen pàgines amb marges inferiors lleugerament més grans que els marges superiors i lleugerament més grans a la vora exterior de la pàgina que la columna vertebral:
@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}
Amagar el contingut irrellevant
No tot el contingut serà adequat per a una versió impresa del vostre document. Si la vostra pàgina inclou navegació per bàners, anuncis o una barra lateral, és possible que vulgueu evitar que apareguin aquests detalls a la versió impresa, per exemple:
#contents, div.ad { display: none; }
Arreglant enllaços
Els hiperenllaços, òbviament, no són rellevants en el material imprès, de manera que probablement voldreu suprimir els estils que els diferenciïn del text circumdant:
a { text-decoration: none; color: inherit; }
Tanmateix, és possible que vulgueu que els lectors tinguin accés als URL originals i una solució senzilla és inserir-los automàticament després del text enllaçat:
a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}
Aquest CSS proporciona resultats com els següents:
a [href]: després s'orienta específicament a la posició després de ( : després ) cada element d'enllaç ( a ) que realment té un URL ( [href] ). El contingut la declaració aquí insereix el valor del fitxer href atribut entre claudàtors. Tingueu en compte que es poden aplicar altres regles d’estil per controlar la visualització del contingut generat.
Gestió de salts de pàgina
Per evitar que els salts de pàgina deixin contingut aïllat o es trenquin incòmode al centre, feu ús de les propietats de salt de pàgina: salt de pàgina abans , salt de pàgina després i salt de pàgina dins . Per exemple:
table { page-break-inside: avoid; }
Això hauria d'ajudar a evitar que les taules abastessin diverses pàgines, sempre que cap sigui més alta que una sola pàgina. De la mateixa manera:
h1, h2 { page-break-before: always; }
Això significa que aquests encapçalaments sempre inicien una pàgina nova. Tanmateix, pot provocar problemes si seguiu immediatament l’h1 de la vostra pàgina amb un h2, ja que l’h1 acabarà en una pàgina tot sol. Per evitar-ho, només cal cancel·lar el salt de pàgina mitjançant un selector orientat a aquesta instància específica, per exemple:
com solucionar el botó d'inici de l'iPhone
h1 + h2 { page-break-before: avoid; }
Visualització d’estils d’impressió
En tots els casos, el navegador i el sistema operatiu haurien de proporcionar una funció de previsualització d'impressió, sovint com a part del diàleg d'impressió estàndard.
El navegador Chrome facilita la comprovació i fins i tot la depuració dels vostres estils d’impressió mitjançant les eines per a desenvolupadors, com es demostra en aquest exemple que mostra un CV amb un full d’estil d’impressió. Primer, obriu el menú principal i seleccioneu Més eines seguit del Eines per a desenvolupadors opció:
Al nou tauler que apareix, seleccioneu Menú , doncs Més eines , Seguit per Representació :
A continuació, desplaceu-vos cap avall fins a Emula el tipus de suport CSS configuració. El menú desplegable us permet alternar entre la visualització d'impressió i la pantalla del document:
En emular el full d’estils d’impressió, l’estàndard Navegador d’estils està disponible per inspeccionar i modificar les regles d’estil en viu. Tingueu en compte que l’emulació de la impressió en pantalla encara no és precisa al 100%. El navegador no sap res sobre la mida del paper i el @pàgina la regla no es pot emular.
Impressió en PDF
Una característica útil dels sistemes operatius moderns és la possibilitat d’imprimir en un fitxer PDF. De fet, tot el que pugueu imprimir es pot enviar a un fitxer PDF, no és cap sorpresa, ja que, al cap i a la fi, se suposa que un fitxer PDF representa un document imprès.
Això fa que HTML, en combinació amb un full d’estil d’impressió, sigui un mitjà excel·lent per crear un document d’alta qualitat que es pugui enviar com a fitxer adjunt i imprimir-lo.
Imprimiu diversos documents
Podeu utilitzar un full d’estil d’impressió per crear documents de qualitat, inclosos qualsevol cosa, des del vostre CV fins a receptes o anuncis d’esdeveniments. Les pàgines web solen semblar lletges i contenen detalls no desitjats quan s’imprimeixen, però un nombre reduït de modificacions d’estil poden millorar dramàticament els resultats d’impressió. Desar els resultats finals com a PDF és una manera ràpida de crear documents atractius i professionals.
Compartir Compartir Tweet Correu electrònic Com imprimir pàgines web a PDF amb Microsoft EdgeUs heu trobat mai amb un article interessant per al qual volíeu desar més tard? Bé, podeu desar com a PDF amb Edge en tres senzills passos.
Llegiu a continuació Temes relacionats- Programació
- Impressió
- CSS
Bobby és un entusiasta de la tecnologia que va treballar com a desenvolupador de programari durant gairebé dues dècades. És un apassionat dels jocs, treballa com a editor de ressenyes a Switch Player Magazine i està immers en tots els aspectes de la publicació en línia i el desenvolupament web.
Més de Bobby JackSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us