23 janvier 2020

Html table, css float et grid

Comparaison de la balise table de html et des modèles float et grid du css appliqués à un exemple simple de planches de cartes de visite

Planche de carte de visite

cartes de visite

Nous voudrions faire des planches de cartes de visite à monsieur Simon Cussonet.

Les données d'une carte sont au format html dans un fichier nommé simon :

<p>Simon Cussonet</p>
<p>Thorel<br>Eure</p>
<p>00 12 34 56 78<br>
06 00 12 34 56</p>
<p>scussonet@torel.net<br>
http://scussonet.torel.net</p>

Le résultat souhaité est une planche (une feuille) quadrillée qu'il faut découper pour obtenir dix cartes au format carte de crédit (85mmx54mm). Cette planche est au format html qu'on affichera dans un navigateur et qu'on imprimera.

Nous allons comparer trois méthodes utilisant un script bash pour produire le fichier html adéquat appelé simon.html.

Remarque : J'ai fait le choix de tout faire tenir dans ce fichier, structure et mise en forme afin d'en donner une vue globale. En utilisation normale il vaudrait mieux séparer les deux parties en deux fichiers.

Avant l'an 2000

Dans ce temps là on utilisait sans vergogne la balise html <table> avec ses lignes <tr> et ses colonnes <td>. Voici un script bash tvcard produit une planche.

#!/bin/bash
dest=$1.html
cat > $dest << Table
<!DOCTYPE html>
<html>
<head>
   <meta charset='utf-8'>
   <style>table,td{
      border:1px solid;
      border-collapse:collapse;
   }
   tr { height: 54mm; }
   td { width:84mm; padding-left:8mm; }
   </style>
   <title>tvcard $1</title>
</head>
<body style="width:210mm; height:297mm;">
<table>
Table
for r in {1..5}
do
   echo '   <tr>' >> $dest
   for c in 1 2 
   do
      echo '   <td>' >> $dest
      cat $1 >> $dest
      echo '   </td>' >> $dest
   done
   echo '   </tr>' >> $dest
done
echo '</table>' >> $dest
printf '</body>\n</html>' >> $dest

Commentaires

  1. Le script ci-dessus se lance par la commande ./tvcard simon. L'argument simon est tout à la fois le prénom de monsieur Cussonet, le nom du fichier qui contient les données de sa carte, et le préfixe du fichier simon.html, qui sera produit.
  2. La variable dest=$1.html contient le nom du fichier destination.
  3. Les lignes allant de cat > $dest << Table à Table déclarent une variable chaine dans le style heredoc, qui initialise le fichier destination. On y trouve un peu plus que le head, notamment la définition des styles css employés.
  4. Les boucles for servent à produire les lignes de la table.
  5. Les deux dernières lignes ferment les balises ouvertes.
  6. Il ne faut pas oublier de donner les droits d'exécution au script par chmod +x tvcard.

Remarque

Il faut reconnaitre que cette méthode est un peu laborieuse.

De l'an 2000 à environ 2017

Changement de paradigme. Il devenait mal venu d'utiliser les attributs de la balise table auxquels il fallait substituer des propriétés css. Au fil des années, cette balise devenait maudite. Il était recommandé d'envoyer flotter des boîtes dans le corps du document (le body). Ces boîtes se bousculaient et se disputaient la priorité au gré des propriétés position: relative, postion: absolute. Elles pouvaient surgir dans le trafic par la droite, par la gauche et même l'ignorer complètement. La gestion de ce capharnaum s'apparentait parfois à de la haute voltige qu'il était permis de compliquer à l'extrême.

Voici une nouvelle mouture du script bash que nous nommerons ici fvcard (f comme float).

#!/bin/bash
dest=$1.html
cat > $dest << Head
<!DOCTYPE html>
<html>
<head>
   <meta charset='utf-8'>
   <style>   
   body {width: 210mm; height: 297mm; margin: auto; padding: 0;
      border-top: solid 0.1mm #bbb; border-left: solid 0.1mm #bbb; }
   .card {display: block; float: left; margin: 0; padding: 0;
      width: 85mm; height: 53.8mm;
      border-bottom: 0.1mm solid #bbb; border-right: 0.1mm solid #bbb; }
   p {padding-left: 8mm;}
   </style>
   <title>fvcard $1</title>
</head>
<body>
Head
for r in {1..10} 
do
   printf '\t<div class="card">\n' >> $dest
   cat $1 >> $dest
   printf '\t</div>\n' >> $dest
done
printf "</body>\n</html>" >> $dest

Commentaires

  1. La balise table a disparu.
  2. Il n'y a plus qu'une seule boucle for.
  3. La partie css (balise style) est plus fournie. C'est normal puisque toute la mise en forme se trouve ici. La carte devient une div de type block et float: left.
  4. Je pouvais améliorer l'indentation du fichier html, mais cette coquetterie aurait nuit à la clarté du script bash.

Retour insidieux au tableau

Ayant fait le constat que la prolifération des propriétés css devenait hasardeuse, il (le W3C) a été convenu d'y mettre un peu de rigueur et de fiabilité. Le modèle de table a alors retrouvé sa dignité, mais côté css, sous la forme de grid. (Voir la page Grilles CSS du site MDN et suivantes).

Bien que l'objectif de ces grilles soit tout autre, nous allons les utiliser dans une nouvelle version du script bash, que nous appellerons gvcard (g pour grille).

Dans cette partie je vais scinder html et css.

Voici le html

#!/bin/bash
dest=$1.html
cat > $dest << Head
<!DOCTYPE html>
<html>
<head>
   <meta charset='utf-8'>
   <link href="vcard.css" rel="stylesheet">
   <title>fvcard $1</title>
</head>
<body>
Head
printf '<div class="wrapper">\n' >> $dest
for i in {1..5} 
do
   printf '\t<div class="lcut"> </div>\n' >> $dest
   for c in 1 2
   do
      printf '\t<div class="card">\n' >> $dest
      cat $1 >> $dest
      printf '\t</div>\n' >> $dest
   done
   printf '\t<div class="rcut"> </div>\n' >> $dest
done
printf "</div>\n</body>\n</html>" >> $dest

Et maintenant le css

.wrapper {
   display: grid;
   width: 210mm;
   height: 297mm;
   /* width: 85mm */
   grid-template-columns: 1fr 85mm 85mm 1fr;
   /* height: 54 mm */
   grid-template-rows: repeat(5, 54mm);
   border-top: 0.1mm solid #aaa;
}
.card, .lcut {
   border-bottom: 0.1mm solid #aaa;
   border-right: 0.1mm solid #aaa;
 }
 .rcut {
   border-bottom: 0.1mm solid #aaa;
 }
p {margin: 3mm; padding: 0; padding-left: 8mm;}

J'y ai ajouté une fioriture consistant à prolonger les lignes horizontales dans la marge par le biais des classes .lcut er .rcut. Le modèle grid s'y prête bien.

restrictions

Il semblerait que seul un nombre restreint de navigateurs implémentent le modèle css grid. Ce n'est pas gênant dans notre cas puisque nous l'utilisons en locali, et que nous avons la version la plus récente du navigateur..



Réalisé avec Qlam - LGPL