VERSION DE IMPRESIN (CSS)

INDICE
1.

PARA QUE SE UTILIZA? ..................................................................................................... 3

2.

INGREDIENTES ................................................................................................................... 4

Media ........................................................................................................................................ 4
Content...................................................................................................................................... 5
Selector @page: ........................................................................................................................ 5
Saltos de Pgina: ....................................................................................................................... 6
Propiedad orphans y widows: ............................................................................................. 7
3.

RECETAS ............................................................................................................................. 7

Estilo CSS para Web Site Impresos en Papel: ............................................................................. 7

Estilo CSS para Web Site en proyectores:................................................................................... 9
Los ejemplos explicados en clases ........................................................................................... 13

1.

PARA QUE SE UTILIZA?

Para ofrecer al usuario la posibilidad de imprimir sus contenidos mediante una
versin especfica para impresora de cada pgina.
Estas versiones optimizadas para impresora eliminan los contenidos
superfluos, modifican o eliminan las imgenes y colores de fondo y sobre todo,
optimizan los contenidos de texto para facilitar su lectura.
CSS simplifica al mximo la creacin de una versin para imprimir gracias al
concepto de los medios CSS. Como se sabe, los estilos CSS que se aplican a los
contenidos pueden variar en funcin del medio a travs del que se acceden
(pantalla, televisor, mvil, impresora, etc.).
Entonces una pgina con el siguiente diseo

A la hora de imprimir se puede ver as

2.

INGREDIENTES
Media
Es un atributo opcional de la etiqueta <link> que especifica el medio o
medios en que debera aplicarse la hoja de estilo, Los valores posibles
son:

screen (valor por defecto), para presentacin en pantallas de

computadoras no-paginadas;
print, para salida a una impresora;
projection, para presentaciones en proyectores;
aural, para sintetizadores de voz;
braille, para presentacin en dispositivos braille;
tty, para pantalla en celda de caracteres (usando una fuente de inclinacin
fija);
tv, para televisores;
all, para todos los dispositivos de salida.
El siguiente ejemplo muestra cmo aadir el atributo a la etiqueta <link
>:
<link rel="stylesheet" type="text/css" href="/css/imp
rimir.css" media="print" />

Content
Genera contenido de forma dinmica, se aplica a los pseudo-elementos
:before y :after.
Como su propio nombre indica, estos pseudo-elementos permiten
seleccionar (y por tanto modificar) la parte anterior o posterior de un
elemento de la pgina.
El siguiente ejemplo muestra cmo aadir la palabra Captulo delante
del contenido de cada ttulo de seccin <h1>:
h1:before {
content: "Captulo ";
}

Selector @page:
Este selector presenta un modelo de caja (boxmodel) donde se
alojarn todos los contenidos que sern impresos.
El boxmodel en los medios impresos es el mismo que en el
media="screen". El tamao final de la caja generada por el selector
@page es la suma de sus laterales (margin + border + padding) ms su
width o height.
La nomenclatura bsica de este selector es la siguiente:
@page {
//Sentencias CSS
}
El @page admite la definicin de clases
@page rotada {
Size: landscape;
}

ste
selector
posee
las cuales son las siguientes:

sus

propiedades

singulares,

size: Define el tamao de la caja generada "page".

size: portrait; : Especifica que el contenido de la pgina se imprime en

orientacin vertical.
size: landscape; : Especifica que el contenido de la pgina se va a
imprimir en orientacin horizontal.
page-size: son nombres claves de tamaos de papel estndar como
A3, A0, B5, legal, letter... en combinacin con la orientacin.
Elemplo:
@page {
size:

A4 landscape;

Saltos de Pgina:
Para evitar que ciertos elementos se corten y repartan en 2 pginas se
puede definir los saltos de pgina:
Antes: page-break-before
Despus: page-break-after
Dentro: page-break-inside
Los saltos de pgina page-break-before y page-break-after
no se heredan y permiten los valores:
auto: Ni fuerza ni prohibe un salto de pgina antes
(despus) de la caja generada.
always: Siempre fuerza un salto de pgina antes
(despus) de la caja generada.
avoid: Evita un salto de pgina antes (despus) de la
caja generada.
left: Fuerza uno o dos saltos de pgina antes (despus) de la caja genera
da para que la siguiente pgina sea compuesta como una pgina izquier
da.
right: Fuerza uno o dos saltos de pgina antes

(despus) de la caja generada para que la siguiente

pgina sea compuesta como una pgina derecha.

Propiedad orphans y widows:

La propiedad 'orphans' (hurfanas) especifica el nmero mnimo de
lneas de un prrafo que deben dejarse al final de una pgina.
La propiedad 'widows' (viudas) especifica el nmero mnimo de lneas
de un prrafo que deben dejarse al comienzo de la pgina.

3.

RECETAS
Estilo CSS para Web Site Impresos en Papel:
Las reglas CSS de la versin para imprimir se aplican solamente al
medio print. Por lo tanto, en primer lugar se crea una nueva hoja de estilos
y seguimos los siguientes pasos:
1. Ocultar los elementos que no se van a imprimir:
#cabecera, #menu, #lateral, #comentarios {
display: none !important;
}
Los bloques (normalmente encerrados en elementos de tipo <div>)
que no se van a imprimir se ocultan con la propiedad display y su
valor none. La palabra clave !important aumenta la prioridad de esta
regla CSS.
2. Corregir la estructura de la pgina:
#body, #contenido, #principal, #pie {
float: none !important;
width: auto !important;
margin:

0 !important;

padding: 0 !important;
}
Si al imprimir la pgina se eliminan las columnas laterales, es
conveniente reajustar la anchura y el posicionamiento de la zona de
contenidos y de otras zonas que s se van a imprimir.
3. Modificar los colores y tipos de letra:

#body { color: #000; font: 100%/150% Georgia, "Tim

es New Roman", Times, serif; }
Aunque el uso de impresoras en color es mayoritario, suele ser
conveniente imprimir todo el texto de las pginas de color negro,
para ahorrar costes y para aumentar el contraste cuando se imprime
sobre hojas de color blanco. Tambin suele ser conveniente
modificar el tipo de letra y escoger uno que facilite al mximo la
lectura del texto.
4. Imprimiendo los enlaces:
En principio, imprimir los enlaces de una pgina es absurdo porque
no se pueden utilizar en el medio impreso.
Sin embargo, lo que puede ser realmente til es mostrar al lado de
un enlace la direccin a la que apunta. De esta forma, al imprimir la
pgina no se pierde la informacin relativa a los enlaces.
Si se combina la propiedad content y el pseudo-elemento :after, es
posible insertar de forma dinmica la direccin a la que apunta un
enlace justo despus de su texto:
a:after {
content: " (" attr(href) ") ";
}
El cdigo CSS anterior aade despus de cada enlace de la pgina un
texto formado por la direccin a la que apunta el enlace mostrada

entre parntesis. Si se quiere aadir las direcciones antes de cada

enlace, se puede utilizar el pseudo-elemento :before:
a:before {
content: " (" attr(href) ") ";
}
5. Agregar la hoja de estilo a la pgina Html:
Debemos asignar la hoja de estilos externa para definir el aspecto c
uando un usuario imprime la pgina web.

<link rel="stylesheet" type="text/css" href="/css/i

mprimir.css" media="print" />

Agregamos el atributo media="print", que indica que esta hoja de e

stilos es slo para cuando se va a imprimir la web.

Estilo CSS para Web Site en proyectores:

Para realizar el CSS de la pgina para ser mostrada en proyector
debemos en primer lugar tener las siguientes consideraciones:
-

no tenemos que ocultar elementos exactamente como si fuera

una hoja de impresin (aunque tambin es un estilo paginado),
deben de ocultarse paneles con publicidad, ms los mens
deberan de permanecer presentes para mantener la
navegabilidad.

manipular las imgenes de fondo de ser necesario; hay fondos

que no interfieren en la lectura presentada por el proyector, mas
s existen los que afectan, especialmente las imgenes
repetitivas.

manejar el fondo de las etiquetas <div> que sean contenedores

de texto, de forma que posean recomendablemente un fondo de
color slido que contraste con el color del texto que contiene (en
algunos casos no hace falta dicho contraste porque ya est
presente).

Evaluar la legibilidad del texto presente en el web site, de forma

que pueda consultarse el hecho de modificar tamaos fuentes o
colores de ser necesario.

Para efectos prcticos se tiene un ejemplo simple de una hoja HTML

con un ttulo, una informacin principal, un color, un panel que
fungir como publicitario y una imagen de fondo repetitiva. Para
crear el CSS de proyector para esta pgina se seguirn los siguientes
pasos:

1. Crear el selector @media con el atributo projector en la hoja CSS

normal, o crear una hoja CSS nueva
@media projection{
// sentencias CSS para el estilo de proyector
}

Se puede programar el Selector "@media" con el atributo

"projection" (proyector) para el estilo de proyeccin dentro de la
misma hoja CSS natural de la web site, o en su defecto crear una
nueva hoja de estilos, en Este Ejemplo se realizar de ambas formas
(el cdigo CSS permanecer igual en ambas instancias).
2. Verificar los elementos que deben ser ocultados
.publicidad {
display: none !important;
}

Aquellas etiquetas que contengan banners publicitarios se deben

ocultar para no entorpecer la presentacin de la pgina, en este
caso todos los paneles publicitarios tienen la clase .publicidad,
No obstante deben permanecer presentes los mens, para efectos
de navegabilidad
3. Evaluar si la imagen de fondo interfiere con la legibilidad
#body {
margin-left:200px;
background: #5d9ab2 url("img_tree.png") no-repeat
top left;
}
En este caso la imagen de fondo es una imagen que se repite, por
tanto evitaremos que se repita agregando el atributo "no-repeat"
4. Revisamos si hace falta un color de fondo para mayor legibilidad
.center_div{
background-color: #004080;
}

En este caso colocaremos un color de fondo al contenedor que contiene el

texto principal, el cual tiene la clase center_div, se le coloc un tono de
azul que contraste con las letras blancas.

5. Revisar letra, fuente y tamao

.center_div {
font-size: 20px;
}

En este caso mantendremos la fuente y el color, pero el tamao lo

aumentamos, tanto en el titulo como en el texto.

6. Revisar la presentacin de la pgina

Despus de estos cambios, a manera de que si algo afecta la presentacin
de la pgina, modificarlo antes de presentar la hoja CSS final.
Luego de los cambios previos el web site de ejemplo pas de verse as:

A verse as:

7. Insertar la hoja CSS en la pgina HTML.

<link rel="stylesheet" type="text/css" href="estilos
de visualizacion normal.css" media="screen,projection
" />
<link rel="stylesheet" type="text/css" href="estilos
de proyeccion.css" media="projection" />
En caso de haber programado el estilo dentro del selector @media

projection entonces con insertar la hoja CSS principal y agregar el

atributo projection basta, pero de haber programado en una hoja
CSS separada debern insertar la hoja CSS del estilo de proyeccin
agregndole el atributo media="projection".

Los ejemplos explicados en clases

Podrs observar los ejemplos en el siguiente enlace.
https://www.dropbox.com/sh/m5dsbx7q2cs26ta/AABdOfTiU25BvSQwDBtOTc
Vfa/Ejemplos_ImpresionCSS