CSS permite aplicar estilos dependiendo del medio que se esté utilizando: medio visual, medio de impresión, medio audible, etc...

Ahora que ya tenemos un conocimiento amplio y extenso de las hojas de estilo CSS, debemos saber que éstas no se limitan sólo a páginas webs. Por ejemplo, muy probablemente conozcas los famosos ebooks (libros electronicos) en formato EPUB, estos documentos no son más que un archivo comprimido en formato ZIP, que en su interior contiene HTML y CSS. Algunos programas o aplicaciones, como por ejemplo el editor Atom o el cliente de Twitter Janetter utilizan CSS para cambiar el aspecto visual de la aplicación. Esto sólo son algunos casos en los que CSS forma parte de nuestra vida casi sin darnos cuenta.

CSS no se utiliza únicamente para aspectos visuales de una página web, sino que también se amplia su alcance a otro tipo de medios, como por ejemplo medios impresos o medios audibles.

Medios impresos

Mediante CSS podemos especificar una hoja de estilos para mostrar a un visitante cuando navega, y otra hoja de estilos diferente cuando quiere imprimir esa página. O un fragmento de código CSS para una página web vista desde el navegador y un fragmento de código CSS sólo para cuando se envía a imprimir dicha página.

La razón es obvia, en una impresión nos pueden interesar objetivos diferentes:

Podemos ver un ejemplo sencillo en la propia Wikipedia, la cuál muestra una página de Wikipedia para visitantes y otra página de Wikipedia para impresiones con un CSS diferente.

Estilos CSS internos

Existen varios métodos para realizar esta separación. El primero y más sencillo es utilizar la regla @media print, y en su interior colocar las reglas CSS para aplicar a los medios de impresión:

@media print {
    .banner, #menu, #navegacion {
        display:none;
    }
    body, #contenido {
        font-family:Ecofont;
        background:#FFF;    /* Blanco */
        color:#000;         /* Negro */
    }
}

Si imprimes muy a menudo documentos, puedes utilizar EcoFont, una fuente sans serif que tiene pequeños agujeros en su interior para ahorrar tinta en la impresión de borradores y que mantiene el mismo aspecto visual tradicional:

Ecofont, una tipografía para ahorrar tinta

Estilos CSS externos

Otra forma de especificar hojas de estilos para impresión es hacerlo en un archivo CSS externo diferente del CSS principal:

<link type="text/css" rel="stylesheet" href="index.css" media="screen">
<link type="text/css" rel="stylesheet" href="print.css" media="print">

Notar que, uno de los atributos utilizandos en el HTML es el de media, que indica en que tipo de medio se va a utilizar el archivo CSS indicado. Si se omite, se utilizará en todos, si se especifica un atributo media, sólo se utilizará si se está usando ese tipo de medio.

Existen muchos otros perfiles, aunque están mucho menos extendidos:

Perfil Significado
screen Monitores o pantallas de ordenador. Suele ser el más común.
print Documentos impresos o pantallas de previsualización de impresión.
speech Lectores de texto para invidentes (Antes aural, el cuál ya está obsoleto).
braille Dispositivos tácticles en braille.
embossed Documentos impresos con sistemas de impresión en braille.
handheld Dispositivos móviles tradicionales (no smartphones).
projection Presentaciones o dispositivos de proyección.
tty Terminales o consolas informáticas.
tv Pantallas de televisión.
all Todos los dispositivos o medios. El que se utiliza por defecto.

Nota: De la misma forma que especifico un @media print en el CSS para aplicar estilos de impresión de documentos, puedo hacer un @media screen para aplicar estilos en páginas que veremos por pantalla.

Medios paginados

Además de estos perfiles, cabe destacar la existencia de las CSS Paged Media, que no son más que propiedades específicas para medios paginados, como por ejemplo, documentos impresos o la exportación de documentos a archivos PDF.

Existen varias propiedades CSS interesantes para estos medios, que pueden ser utilizadas dentro de un bloque @page:

Propiedad Valores Significado
size auto | tipo documento | ancho alto Indica las dimensiones de cada página.
margin tamaño Idéntica a la propiedad margin que conocemos.

Mediante la propiedad size se puede establecer el formato de la página, tanto mediante los valores predefinidos portrait o landscape (vertical o apaisado), como especificando las medidas mediante unidades:

@page {
    size: 8.27in 11.69in;   /* DIN A4 */
    margin: .5in .5in .5in .5in;
}

De forma adicional, también puedes indicar el tipo de documento mediante algunas palabras clave como valor de la propiedad size (las cuales se pueden usar junto a landscape o portrait):

Valor Medidas Significado
A5 148mm×210mm Documento de mitad de tamaño de un folio DIN A4.
B5 176mm×250mm Documento de tamaño entre A5 y A4.
A4 210mm×297mm Documento de exactamente el tamaño folio DIN A4.
B4 250mm×353mm Documento de tamaño entre A4 y A3.
A3 297mm×420mm Documento del doble de tamaño de un folio DIN A4.
letter 215.9mm×279.4mm Documento de tamaño de las cartas americanas.
legal 215.9mm×355.6mm Documento de tamaño de notificación legal americana.
ledger 279.4mm×431.8mm Documento de tamaño libro americano.

Nota: Cualquier propiedad utilizada dentro de una regla @page que no sea una de las anteriores será ignorada.

Una vez tenemos definida la estructura de cada página del documento, pasaremos de una página web que tiene una estructura continua a un documento paginado, donde cada cierto tamaño tiene un salto de página que interrumpe el contenido.

Paginación de contenidos

Al establecer dichos saltos de página, el contenido se adapta al tamaño de cada página especificado, pero puede ocurrir que debido a los límites impuestos por los saltos de página, un cierto contenido deba ser cortado a la mitad y continuado en la siguiente página.

Esto, generalmente no es un problema, pero pueden darse muchos casos en los que sí lo sería:

Para evitar estos problemas de paginación se suelen utilizar algunas propiedades interesantes:

Propiedad Valores Significado
orphans número de líneas Líneas «huérfanas» permitidas (antes de salto)
widows número de líneas Líneas «viudas» permitidas (después de salto)

Mediante la propiedad orphans (líneas huérfanas) indicamos hasta que número de líneas no vamos a permitir que aparezcan de forma aislada al final de una página. Por ejemplo, si especificamos orphans:3, significa que cualquier párrafo cortado con el salto de página, debe mostrar más de 3 líneas al final de la página. En caso contrario, se moverá el párrafo completo a la siguiente página.

Por otra parte, la propiedad widows (líneas viudas) es la propiedad opuesta a orphans. Si al principio de una página quedan menos de ese número de líneas indicado en widows, se ajusta para que lo supere.

p {
    orphans: 3;
    widows: 3;
}

Saltos de página

Por último, mencionar las propiedades de salto de página, muy útiles para evitar comportamientos que pueden quedar poco atractivos en un documento paginado:

Propiedad Valores Significado
page-break-inside auto | avoid Evita cortar elementos en un salto de página
page-break-before auto | always | avoid | left | right Evita o crea un salto de página antes del elemento
page-break-after auto | always | avoid | left | right Evita o crea un salto de página después del elemento

La propiedad page-break-inside se utiliza para evitar que un cierto elemento pueda ser cortado a la mitad en un salto de página, como por ejemplo imágenes, tablas o fragmentos de código:

@media print {
    img, table, pre, code {
        page-break-inside: avoid;
    }
}

De forma similar, las propiedades page-break-before y page-break-after se utilizan para evitar o forzar al generar el documento paginado que ciertos elementos se mantengan antes o después del salto de página.

Referencia a páginas específicas

También existen algunas pseudoclases (se verá más adelante, en su respectivo apartado) específicas para paginación, que permiten hacer referencia a páginas concretas del documento generado, pudiendo aplicar estilos sólo a este tipo de páginas:

Pseudo-clase Significado
:first Primera página del documento paginado.
:left Páginas izquierdas del documento paginado.
:right Páginas derechas del documento paginado.
:blank Páginas en blanco (generadas por los saltos de página).

Sólo algunas propiedades CSS como margin, padding, background u otras pueden estar permitidas dentro de estas pseudo-clases especiales.

Medios audibles

Al igual que existe un apartado específico de CSS para controlar los aspectos impresos de un documento, también existe un conjunto de propiedades CSS de speech, que puede ser especialmente útil para sistemas de voz para invidentes. Con dichas propiedades, se pueden variar cuestiones relacionadas con el sistema que reproduce el audio de los lectores de voz:

Propiedad CSS Significado
voice-family: Familia de voz a utilizar (hombre, mujer, niño...)
voice-volume: Volumen de voz
voice-pitch: Velocidad de lectura (altura) de voz
pause-before: Realiza una pausa antes de leer el texto
pause-after: Realiza una pausa después de leer el texto

En CSS2 existía una especificación Aural para CSS, sin embargo, todo apunta a que será desplazada por el módulo Speech para CSS3. Desgraciadamente, el CSS para medios audibles, a pesar de estar bien definido, no está muy extendido, por lo que puede ser complejo encontrar dispositivos que lo soporten en la actualidad, cosa que se espera que cambie con el tiempo.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).