olivier evrard

*********************
*********************

HTML CSS to PRINT

Pourquoi utiliser des outils web pour faire du print ?

(Copié-collé du workshop fig. de LUUSE en février 2019)

  • Changer la logique de mise en page conventionnelle sur un logiciel où chaque page succède à l’autre de manière narrative, fonctionnelle et efficace
  • Interagir à plusieurs sur un même document et possiblement en temps réel
  • Envisager des technologies plus conviviales
  • Se permettre de faire évoluer et adapter un outil à chaque projet
  • Permettre une entrée unique de contenu avec une multiplicité de formats en sortie
  • Avoir des systèmes et outils où l’aspect génératif et/ou structurel diffère et peut apporter des problématiques supplémentaires, potentiellement bénéfiques à la pratique
  • Interroger l’utilisation de ces outils de mise en page, de manière théorique et technique, pour en avoir une conscience poussée
  • Développer son autonomie et sa propre méthode de travail pour proposer des objets atypiques et variés

Comment çà marche?

« Le même contenu a deux formes différentes mais complémentaires, produites par le même outil : un navigateur web, connecté à internet d’un côté, et capable de générer un PDF de l’autre. Il n’y a pas la nécessité d’utiliser plusieurs logiciels, d’effectuer des opérations complexes pour passer d’une version “numérique” à un fichier imprimable, mais simplement du logiciel le plus utilisé : un navigateur web. »

Techniquement HTML – CSS – Navigateur (Chrome)

Le contenu, la sémantique sera construite avec l’HTML, du PHP voir un framework comme WordPress (avec BDD) ou GRAV (pas de BDD). Le style sera travaillé avec les CSS

Pour l’impression dans Chrome (le plus précis en terme d’exécution), il faudra passer par les medias queries. Habituellement utilisés pour le multi format, le format responsive, adaptable sur grands et petits écrans, les medias queries serviront ici pour des nouveaux formats, une sorte de responsive mais PRINT, papier.

@media

@media print{
@page{
size:21cm 29.7cm;
}
}

Liens

 

*********************