Entre juillet et septembre 2015, à la demande de la caravane graphique OSP, j’ai contribué au développement des outils de mise en page pour la réalisation du magasine Médor. Médor est ce « magazine trimestriel belge et coopératif d’enquêtes et de récits » qui, à peine imprimé, a été interdit de diffusion pour être autorisé 12 jours après (voir ici puis ici, et là). Une des particularités de Médor est qu’il est mis en page via des outils utilisés habituellement pour le web et que cette mise en page, par les outils utilisés qui sont des langages standards du web, est essentiellement (d)écrite. Les graphistes d’OSP explorent depuis un moment les possibilités d’utilisation des ces outils web pour l’édition (voir leur outil html2print) et j’ai de mon côté développé l’idée dans le cadre des supports imprimés pour le BRASS.
Pour Médor, ma contribution a été essentiellement d’écrire un court script (en less) qui permet de générer automatiquement des règles de positionnement de blocs en CSS selon une grille donnée. L’idée était de donner la possibilité aux graphistes de créer des blocs de contenu attachés à la grille, sans devoir calculer la position ou les dimensions des blocs. Où le code html suivant:
<div class="x3 y2 w3 h4"></div>
Crée un bloc aligné sur la 3ème colonne et sur la 2ème ligne de la grille, dont la largeur est égale à 3 colonnes et la hauteur à 4 lignes. Pour que cela fonctionne, il faut que les classes x3 y2 w3 et h4 aient été générées et c’est précisément l’utilité du script, que voici:
/*Page setup*/
@page-width: 482pt;
@page-height: 652pt;
/* Margins */
@page-margin-inside: 34pt;
@page-margin-outside: 24pt;
@page-margin-top: 24pt;
@page-margin-bottom: 40pt;
@body-width:@page-width - @page-margin-inside - @page-margin-outside;
@body-height:@page-height - @page-margin-top - @page-margin-bottom;
/*Grid setup*/
@col-number: 9;
@col-gutter: 6pt;
@row-number: 9;
@row-gutter: 6pt;
/*Grid builder*/
@col-width: (@body-width - ((@col-number - 1) * @col-gutter)) / @col-number;
@row-height: (@body-height - ((@row-number - 1) * @row-gutter)) / @row-number;
@col-gutter-width: @col-width+@col-gutter;
@row-gutter-height: @row-height+@row-gutter;
/* x classes */
.create-x-classes(@i:0) when(@i < @col-number){
.x@{i}{
left:@i * @col-width + @i * @col-gutter;
}
.create-x-classes(@i + 1);
}
.create-x-classes();
/* y classes */
.create-y-classes(@i:0) when(@i < @row-number){
.y@{i}{
top:@i * @row-height + @i * @row-gutter;
}
.create-y-classes(@i + 1);
}
.create-y-classes();
/* width classes */
.create-w-classes(@i:1) when(@i <= @col-number){
.w@{i}{
width:@col-width * @i + @col-gutter * (@i - 1);
}
.create-w-classes(@i + 1);
}
.create-w-classes();
/* height classes */
.create-h-classes(@i:1) when(@i <= @row-number){
.h@{i}{
height:@row-height * @i + @row-gutter * (@i - 1);
}
.create-h-classes(@i + 1);
}
.create-h-classes();
La conversion colorimétrique des documents pdfs à envoyer à l’imprimeur a été assurée par l’outil « color_convert.sh » dont j’ai déjà parlé dans un article sur le BRASS.
