Syntaxe dans balise html

Bonjour,

Je cherche à insérer un style directement dans une balise html. La particularité c'est que ce style ne doit s'appliquer que pour l'impression. Voici le code qui ne fonctionne pas, mais je suppose que cela pourrait ressembler à :

<img src='jpg_AMMPrematurees475.jpg' width="1" height="1" style="@media print {width:'475px';height:'153px';}" />

Merci
Modifié par Pascale (17 Oct 2008 - 12:40)

Bonjour,

Impossible de gérer ça ainsi ... l'attribut style ne pouvant contenir que les propriétés CSS et leurs valeurs respectives.

Mais pourquoi ne pas passer par une feuille de styles externe ... y a t-il une contrainte spécifique ?

Pascale a écrit :
Je cherche à insérer un style directement dans une balise html. La particularité c'est que ce style ne doit s'appliquer que pour l'impression.

Ces deux propositions ne sont pas réconciliables. Les style inline (avec l'attribut HTML style) ne permettent pas de préciser le média, d'utiliser les pseudo-classes, etc.

En effet je pense que la meilleure solution c'est de définir une feuille de style juste pour le print

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

Ou en utilisant une balise a l'interieur de ta feuille de style

@media print {
  /* les elements print */
}

Le problème c'est que la taille de l'image passée dans le style est calculée pour chaque image (du moins pourrait l'être via un script php). Il serait donc impossible d'avoir un style générique pour toutes les images.

En fait, je souhaite réduire la taille de l'image par 4 pour obtenir une résolution à l'impression de 288dpi. Or, dans un style générique, le code CSS

img {width:'25%'; height:'25%';}

ne s'applique pas à l'image mais à son conteneur.

Je crois donc que ce n'est pas possible, effectivement.

Il fallait prendre le problème dans l'autre sens.
Code html :

<img src='jpg_AMMPrematurees475.jpg' width="475" height="153" class="impression" />

CSS:

@media screen {
img.impression	{width:1px;height:1px;}
}

Cela fonctionne.

En fait non, cela ne fait pas ce qu'il faut : l'image d'origine doit être à 1px dans le code HTML pour ne pas apparaître même quand les feuilles de style sont désactivées. Toutes ces recherches font suite à la discussion http://forum.alsacreations.com/topic-4-37765-1-resolu-Taille-des-images-a-limpression.html

Je cherche encore...

Alors voilà une solution qui, j'espère, n'intéresse pas que moi.

HTML :

<img src='jpg_AMMPrematurees475.jpg' width="1" height="1" style="width:475px;height:153px;" class="impression" />

CSS :

@media screen {
img.impression	{display:none;}
}

Si les styles sont désactivés, on ne voit pas l'image à l'écran (image de 1px). S'ils le sont, on ne voit pas l'image à l'écran (display:none;) mais on l'a à l'impression.
Combinée avec une image "basse def", cela fait ce qu'il faut.

Et si la feuille de styles externe n'est pas chargée mais que le contenu HTML (avec styles inline) est bien chargé et interprété, ça ne marche plus. Par exemple, si tu affiches ce contenu dans un flux RSS, ça ne marchera pas des masses.

Donc dans l'ensemble ça reste de la bidouille pas extrêmement fiable. Peut-être suffisant pour tes besoins, malgré tout.

La remarque est juste, mauvaise solution donc.

Tout ça était bien expliqué dans le lien que je t'avais donné.
( Avant dernier paragraphe )

C'est sur que si tu veux ou dois réellement mettre la version Hi Res sur la page pour avoir le même document pour les médias screen et print, tu dois faire des compromis.

De plus, cela va te bouffer de la bande passante également.

En gros, il n'y a pas de "bonne" solution, juste des compromis

Pascale a écrit :
La remarque est juste, mauvaise solution donc.

Non, pas forcément mauvaise solution. Disons qu'il n'y a pas de solution réellement fiable en dehors de l'implémentation par les navigateurs de la résolution d'impression des images (à voir comment elle est enregistrée comme métadonnée avec les différents formats d'image). Donc, en l'absence d'une telle solution, des techniques plus ou moins bidouillées peuvent donner des résultats décents dans une majorité de cas.

(Ou plus largement, il faudrait un mécanisme en CSS pour demander l'affichage à une résolution donnée d'une image. Ainsi une même image en 150 dpi pourrait être imprimée en 150 dpi -- ce qui est déjà correct -- et affichée à l'écran en 96dpi.)

Suivant les objectifs poursuivis, on pourra décider:
- d'utiliser une image basse définition pour l'affichage écran, et de garder cette image basse définition pour l'impression;
- d'utiliser la technique mentionnée avec deux images;
- de travailler avec du PDF.