Commit 2f0ceb8e authored by Dorian's avatar Dorian
Browse files

toolkit fini

parent 350c3bc5
......@@ -27,12 +27,13 @@ Liste des dossiers de layout et leur classes correspondante:
La long a une double page d'intro custom, tandis que la short a un seul page.
* entretien - ```class="entretien"```
* moment-flamand - ```class="flamand"```
* nombril - ```class="nombril"```
* portfolio - ```class="portfolio"```
* portrait - ```class="portrait"```
* rubric - ```class="rubric"```. Le layout par défaut concerne toutes les rubriques: Aire libre, Fulguro-Point, Trait belge, L'enquêteke, Le sexe de Médor, Étude du milieu. Deux layouts articuliers:
* rubric-web - ```class="rubric"```. Les coulisses du Web ont leur propre layout.
* rubric-jouer - ```class="rubric"```. Médor à Jouer consiste le plus souvent en une double-page d'image.
* rubric - ```class="rubric"```. Le layout par défaut concerne toutes les rubriques: Aire libre, Fulguro-Point, Trait belge, L'enquêteke, Le sexe de Médor, Étude du milieu. Et des layouts articuliers:
* rubric-web - ```class="rubric web"```. Layout à part.
* rubric-droit - ```class="rubric droit"```. Enlever titres principaux, intertitres centré, et signature de fin.
* rubric-jouer - ```class="rubric"```. Double-page d'images.
* rub-nombril - ```class="nombril"```. Classe à part des rubrique avec colonnes en walf.
* recit - ```class="recit"```
* sommaire - ```class="sommaire"```
......@@ -48,7 +49,24 @@ Les différents sous-titres des rubriques se trouvent en commentaire dans le lay
### Paramètres URL
[a completer] Les paramètre draft, image, preview à la fin de l'url ```?draft=true&image```
La fin de l'url dans l'élément `art` peut se terminer avec `?draft=true`, si l'article est en brouillon dans le Wagtail.
```HTML
<art id="flow-main" class="entretien" folio="1" src="https://medor.coop/api/v2/pages/780/?draft=true"></art>
```
Pour éviter les chargements d'images trop long, on ajoute `?image-preview=true`
```HTML
<art id="flow-main" class="entretien" folio="1" src="https://medor.coop/api/v2/pages/780/?draft=true&image-preview=true"></art>
```
Note que cela ne réduit pas la résolution des images misent en `background`, seulement celle en qui coule via directement du Wagtail en `figure`.
### Faire commencer les articles en simple ou double
La plupart des articles commencent sur une page de gauche, certain sur une page de droite.
La classe facing permet de commencer à gauche, il suffit de l'enlever pour commencer à droite.
```HTML
<html lang="fr" class="normal facing">
```
## La grille
......@@ -73,6 +91,9 @@ La classe **walf** permet de caler un bloc sur la moitié de la grille.
<div class="bloc t0 r0 walf b0 flow-main"></div>
```
Note que les marges ne prennent effet que sur des côtés sur lesquelles le bloc repose en `position: absolue`.
Par exemple un bloc en `x1 y6 w4 h5` ne sera pas affecter par `margin-right: -24pt`, car son côté droit est défini par une largeur `w4` et non par une position. On peut passer les côtés sur lesquelles on veut que les marges s'appliquent en absolue: `t b l r`.
### Variables de construction de la page/grille
Ces variables sont calculées les unes en fonction des autres et servent à construire la page et la grille.
......@@ -99,7 +120,7 @@ Elle peuvent être récupérées ailleurs.
On peut insérer des balises HTML directement dans le Wagtail.
Un usage est par exemple pour les notes de bas de page ```<sup>1</sup>```
Un usage est par exemple pour les notes de bas de page ```<sup>1</sup>```.
### entités HTML
......@@ -109,6 +130,18 @@ La meilleur façon d'ajouter des caractères spéciaux est de les entrer directe
Liste des codes des entités HTML [https://unicode-table.com/en/html-entities/](https://unicode-table.com/en/html-entities/).
### Line-breaks et césures
Pour empêcher de casser entre deux mots (ex: "21 avril"), on ajoute un ```&nbsp;``` (unicode: ```00a0```).
Pour forcer une césure à être a un certain endroit, on ajoute le caractère invisible ```&shy;``` (unicode: ```00ad```).
Pour empêcher une suite de caractère d'avoir un line-break ou une césure, on utilise la classe ```keep``` via le Wagtail.
```
<span class="keep">un mot ici</span>
```
## Global CSS
### Notes pour récupérer des éléments en CSS
......@@ -151,6 +184,7 @@ La feuille de style ```colors.less``` contient **déjà des variables de couleur
### Ajouter une font
Ajouter les fichiers de font est préférable **dans le dossier de l'article**, et non dans le dossier fonts, afin de garder séparé les fonts de la maquette Médor et celle de customisation d'article et d'éviter une accumulation.
Cela permet également de mieux voir les fonts ajoutées sur un numéro.
```CSS
@font-face {
......@@ -169,17 +203,13 @@ Pour scinder un titre sur plusieurs lignes il vaut mieux éviter d'ajouter ```<b
Une solution simple est de changer la largeur du container pour faire passer à la ligne, cependant ça n'est pas toujours applicable.
Une petite fonction javascript est laissée dans le ```main.js``` du layout qui permet d'ajouter un ```<br/>``` après le n<sup>ième</sup> mot
Une fonction du ```toolkit.js``` peut-être utilisé. qui permet d'ajouter un ```<br/>``` après le n<sup>ième</sup> mot.
Il faut s'assurer que le toolkit est inclu dans le fichier HTML.
```javascript
function add_br_at(i){
let headline = document.querySelector(".headline");
hdl_wordlist = headline.innerHTML.split(" ");
hdl_wordlist[i] = "<br/>" + hdl_wordlist[i];
headline.innerHTML = hdl_wordlist.join(" ");
}
add_br_at(2);
add_br_at(5);
document.addEventListener("OnStoryReady", function(){
add_br_at(1);
});
```
### Lettrine
......@@ -199,6 +229,31 @@ Noter que pas beaucoup de propriétés fonctionne sur ce pseudo-élément, par e
}
```
#### Multiple Lettrines
Certain articles commencent par des guillemets, dans ce cas le guillemets et la première lettre deviennent des lettrines.
Une fonction du ```toolkit.js``` peut-être utilisé, pour ajouter la classe `first-letter` au n premiers caractères.
```javascript
document.addEventListener("OnStoryReady", function(){
multiple_first_letters(2);
});
```
On peut viser chacun de ces caractères individuellement en css pour une lettrine multiple.
```CSS
.first-letter {
/* lettrine */
}
.first-letter:nth-of-type(1) {
/* guillemet en plus petit */
font-size: 0.5em;
}
.first-letter:nth-of-type(2) {
margin-left: -10pt;
}
```
### Forcer l'indentation d'un paragraphe
Si les paragraphes ne s'indentent pas comme désiré on peut les forcer.
......@@ -250,18 +305,6 @@ Le bug est documenté ici: [https://github.com/annulen/webkit/issues/278](https:
Parfois l'effet ne fonctionne pas car le bloc n'est pas positionné sur la grille de manière a prendre en compte les margins.
Il est préférable de les positionner en **top, bottom, left, right** dans ce cas.
### Dingbat de fin d'article
On peut changer le dingbat de fin.
```CSS
body > p:last-of-type::after {
content: '\00A0\e005';
}
```
[Completer avec une table de possibilitées]
## Exergues
HTML Exergues structure
......@@ -489,6 +532,24 @@ Les notes de bas de page viennent dans un flow séparé, et peuvent-être positi
[à completer]
## Sortir des .pdfs de l'OSPKit
Aller à
```
http://localhost:8000/layout
```
Et sélectionner l'article à imprimer, puis le bouton **print** en haut à droite.
Il faut rentrer les dimensions de la page en *custom*, en changeant l'unité en *pt*.
* en 96DPI: ```463pt 600pt```
* en 96DPI (1920x1080): ```231.5pt 300pt```
[completer avec les vraies valeurs?] ```578pt``` et ```748pt```.
(Ces valeurs sont calculées comme ```@page-width + 2*(@crop-size + @bleed)```)
Il faut également choisir le mode *couleur* dans les options.
## Pre-printing process
export des pdf
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment