Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problema con la regla @media print

Estas en el tema de Problema con la regla @media print en el foro de CSS en Foros del Web. Buenas tardes señores. Estoy practicando con la regla @media print para darle un estilo específico al texto de un documento sólo cuando se imprima en ...
  #1 (permalink)  
Antiguo 13/02/2013, 21:06
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 2 meses
Puntos: 22
Pregunta Problema con la regla @media print

Buenas tardes señores.

Estoy practicando con la regla @media print para darle un estilo específico al texto de un documento sólo cuando se imprima en papel.

Supongamos que tenemos un documento con varios párrafos con distintos tamaños de fuente, pero queremos que todo el documento se imprima en un solo tamaño, en 5px, para ahorrar toner. Hasta donde sé, el CSS sería así:

@media print {body {font-size:8px}}
Lo he puesto en px, cm, em, pero no funciona, ¿por qué? Les dejo todo el código fuente del documento. (Ya saben, no necesitan imprimir para ver el resultado, sólo hay que ver VISTA PRELIMINAR)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Versión para imprimir</title>
<style type="text/css">
#parrafo1 {font-size:20px;}
#parrafo2 {font-size:30px;}
#parrafo3 {font-size:40px;}


@media print { body {font-family:"Comic Sans MS", cursive; font-size:5px;}} <!-- Esta regla debería poner todo el texto que se encuentre dentro del BODY en 5px, pero sólo imprime en 5px el contenido de H1 del HTML-->

</style>
</head>

<body>
<div>
<h1>Este texto es un encabezado H1</h1>
<p id="parrafo1">Texto en 20 px</p>
<p id="parrafo2">Texto en 30 px</p>
</div>

<div>
<p id="parrafo3">Texto en 40 px</p>
</div>
</body>
</html>
  #2 (permalink)  
Antiguo 13/02/2013, 23:11
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 3 meses
Puntos: 306
Respuesta: Problema con la regla @media print

Lo cual es lógico ya que sólo al texto que no tiene asignado un tamaño de fuente en forma explicita le aplica esa nueva altura.

Para imprimir tal vez es mejor usar pt en vez de px, por ejemplo fijate que word maneja dicha variable con puntos (pt).

Más info: http://ksesocss.blogspot.com/2012/05...egla-page.html

http://librosweb.es/css/capitulo_13/..._imprimir.html
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 14/02/2013, 14:40
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 2 meses
Puntos: 22
Busqueda Respuesta: Problema con la regla @media print

Cita:
Iniciado por C2am Ver Mensaje
Lo cual es lógico ya que sólo al texto que no tiene asignado un tamaño de fuente en forma explicita le aplica esa nueva altura.

Para imprimir tal vez es mejor usar pt en vez de px, por ejemplo fijate que word maneja dicha variable con puntos (pt).

Más info: [url]http://ksesocss.blogspot.com/2012/05/estilos-css-para-imprimir-la-regla-page.html[/url]

[url]http://librosweb.es/css/capitulo_13/version_para_imprimir.html[/url]
C2AM, bien. Te agradecería que explicaras con más detalle los siguientes puntos.
1. Entonces, ¿la instrucción "@media print {body {font-size:12pt}}" sólo se aplica a todo texto dentro del BODY que explícitamente no tenga asignado ningún tamaño? Si esto es correcto, entonces no sirve de mucho, ¿no crees? Imagino que para que todo el documento tenga en papel el mismo tamaño de letra, 12pt, por ejemplo, hay que crear una clase que cambie el tamaño a 12 y aplicarselo a todos y cada uno de los elementos del HTML. Algo así:
@media print {.tamaño {font-size:12pt}} y asignar esta clase al párrafo 1, 2, 3... n. ¿Así es?

2. Tengo la impresión que debe haber por ahí una regla que me permita cambiar de una vez el tamaño a todo el texto impreso del documento. De no haberla, CSS parecería engorroso.

Saludos, hasta luego.
  #4 (permalink)  
Antiguo 14/02/2013, 18:11
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 3 meses
Puntos: 306
Respuesta: Problema con la regla @media print

Me parece que para la impresión es mejor crear una hoja de estilo diferente.
Primero, porque sin duda será más chica, dado que por ejemplo los fondos de colores no son algo que quieras imprimir (en general), los efectos hover y demás efectos no son necesarios, etc etc.

Luego la disposición de las cajas, el ocultar aquello que no quieras mostrar, el asignar una fuente y su altura en un sólo sitio como ser el body, y en casos muy particulares dentro de alguna caja interna (div p span etc), pero no en cada párrafo como muestras en el ejemplo.

Ahora

1- Esto tiene que ver con la especificidad, o al menos eso creo.
http://www.anieto2k.com/2008/08/12/s...Fcomo-usarlos/

Fijate por ejemplo en esto, cuyo ejemplo saque de aquí
Agregue la última linea de css para probar que a pesar de ser última regla (lo cual debería, debido a la cascada, ser la que se aplica), esto no es así debido a la especificidad de las reglas internas.

http://jsfiddle.net/Kxj7C/2/embedded/result/

Como recomendación no creo que sea buena idea andar asignando alturas de fuentes en cada párrafo, pero es solo eso, una recomendación.

2- Prueba con el body{font-size:12pt!important;}
Lo probe en el ejemplo que te puse y uno de los parrafos no cambio de color.
Agregale el !important a la última clase del ejemplo y verás.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 15/02/2013, 14:33
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 2 meses
Puntos: 22
De acuerdo Respuesta: Problema con la regla @media print

Cita:
Iniciado por C2am Ver Mensaje
Me parece que para la impresión es mejor crear una hoja de estilo diferente... Saludos
Bien, ya le puse el !important; pero sigue sin funcionar. Mas eso que dices suena muy razonable, a saber, crear un archivo .css aparte, exclusivo para la impresión del documento.

Lo voy a hacer.

Saludos, gracias.
  #6 (permalink)  
Antiguo 16/02/2013, 16:28
Avatar de acurog  
Fecha de Ingreso: febrero-2013
Mensajes: 13
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: Problema con la regla @media print

Mi estrategia seria, copiar en otra hoja por seguridad, y ahora hacer lo siguiente:

A todas las lineas de texto - parrafo ponerle antes <p> y al final </p> con esto todo se pone en formarto parrafo no importando en que clase este. (lo mismo es hacer propiedades+html+formato+parrafo)

Saludos
  #7 (permalink)  
Antiguo 16/02/2013, 17:38
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 3 meses
Puntos: 306
Respuesta: Problema con la regla @media print

Cita:
Iniciado por acurog Ver Mensaje
Mi estrategia seria, copiar en otra hoja por seguridad, y ahora hacer lo siguiente:

A todas las lineas de texto - parrafo ponerle antes <p> y al final </p> con esto todo se pone en formarto parrafo no importando en que clase este. (lo mismo es hacer propiedades+html+formato+parrafo)

Saludos
¿Seguridad en que sentido?
Las hojas de estilos son visible siempre.

La segunda parte no la entiendo, es decir, no entiendo que quieres decir.
Los párrafos en html tienen el marcado mediante la etiqueta <p>.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #8 (permalink)  
Antiguo 24/09/2014, 19:37
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 2 meses
Puntos: 22
Respuesta: Problema con la regla @media print

Cita:
Iniciado por C2am Ver Mensaje
¿Seguridad en que sentido?
Las hojas de estilos son visible siempre.

La segunda parte no la entiendo, es decir, no entiendo que quieres decir.
Los párrafos en html tienen el marcado mediante la etiqueta <p>.

Saludos


Así, supongamos que nadie tenga acceso a nuestras imágenes, excepto los siguientes sitios:

instalaciones electricas
mantenimiento industrial
naves industriales
obra civil
proyecto llave en mano
sistemas contra incendios
subestaciones electricas
constructoras
hvac

barreras vehiculares
equipos de estacionamiento
estacionamientos automatizados

roi marketing digital
marketing digital
desarrollo web
agencia marketing digital

salones para eventos df
mexico hotels
mexico city hotels
hotel mexico
hotels in mexico city
hotel in mexico city
hoteles df centro
hoteles centro historico df
hoteles 5 estrellas
hotel df
hotel ciudad de mexico
hoteles con alberca df

Última edición por berkeleyPunk; 22/10/2014 a las 12:05

Etiquetas: html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:36.