Début de description du CSS

README.md

@@ -1,10 +1,12 @@
 # jsHtml2Ods
 
-Conversion d'un tableau HTML en fichier ODS disponible en téléchargement
+Conversion d'un tableau HTML en fichier ODS disponible en téléchargement.
+
+Le principe de cette bibliothèque est de pouvoir écrire un lien proposant une version ODS (en fait au format .fods) d'un tableau HTML existant. L'exportation est opérationnelle sans aucune modification du tableau mais l'aspect du fichier résultant peut être substantiellement amélioré en ajoutant des attributs spéciaux (`data-od-*`) aux éléments du tableau et en proposant des styles suivant la syntaxe CSS. 
 
 ## Attributs
 
-L'exporation peut être configurée à l'aide d'attributs nommés `data-od-*`. Ils sont tous facultatifs. 
+L'exporation peut être configurée à l'aide d'attributs nommés `data-od-*`. Ils sont tous facultatifs et sont placés au niveau des différents éléments composants le tableau. 
 
 ### Élément `<table>`
 
@@ -24,9 +26,9 @@ L'exporation peut être configurée à l'aide d'attributs nommés `data-od-*`. I
 
 ### Éléments `<td>` ou `<th>`
 
-- `data-od-style` : style de la cellule
+- `data-od-style` : style de la cellule (en cas d'absence de valeur, un élément `<th>` a comme style *Header* et un élément `<td>` a comme style *Standard*)
 - `data-od-type` : type des données de la cellule (valeurs possibles :  `number`, `date` ou `currency`)
-- `data-od-text` : texte de la cellule (alias : `data-od-text`), voir ci-dessous
+- `data-od-text` : texte de la cellule (alias : `data-text`), voir ci-dessous
 - `data-od-currency` : code ISO en trois lettres de la monnaie de la cellule, n'a d'intérêt que si la cellule est de type `currency` et peut être défini au niveau de l'élément `<table>`
 
 #### Texte d'une cellule
@@ -35,4 +37,54 @@ Par défaut, le texte de la cellule dans le fichier résultant est le texte brut
 
 Au lieu de l'attribut  `data-od-text`, la valeur peut être définie dans l'attribut  `data-text`, ce qui permet la comptabilité avec l'extension JQuery TableSorter. Si les deux attributs sont présents, `data-od-text` a la préséance.
 
-Lorsque le texte de la cellule est le texte brut de l'élément, il est possible d'ignorer un élément enfant **direct** de l'élément `<td>` ou `<th>` en lui donnant l'attribut `data-od-hidden` avec n'importe quelle valeur non nulle (1 ou true sont conseillés)
+Lorsque le texte de la cellule est le texte brut de l'élément, il est possible d'ignorer un élément enfant **direct** de l'élément `<td>` ou `<th>` en lui donnant l'attribut `data-od-hidden` avec n'importe quelle valeur non nulle (1 ou true sont conseillés).
+
+## Définition des styles via une syntaxe CSS
+
+Dans le format OpenDocument, la mise en forme des éléments (colonne, ligne, cellule) sont définies par des styles attachés aux éléments. Si de nombreux noms de propriété rappellent ceux des propriétés courantes du CSS, il y a quelques différences de taille :
+
+- Un élément possède un style et un seul
+- La seule hiérachie possible est un parent pour un style
+- Il n'y a évidemment aucune possibilité de définition en « cascade » via les sélecteurs CSS.
+
+Pour définir des styles dans le fichier résultant (par exemple, mettre un fond rouge à une cellule), jsHtml2Ods propose un mécanisme de conversion d'éléments suivant la syntaxe CSS vers le format XML d'OpenDocument.
+
+**Point important** : il s'agit d'une forme de détournement du CSS, aucun sélecteur CSS ne va fonctionner de manière habituelle ; l'idée est de pouvoir définir les styles de l'exportation au même endroit que le reste du HTML, c'est à dire dans les fichiers CSS chargés pa la page (ou le CSS d'éléments `<style>`). L'idée, c'est qu'il n'y ait pas d'interférence avec le reste du CSS ni rejet à la validation du CSS par le navigateur.
+
+Le principe est qu'un style va être défini par les selecteurs suivants : `cell.NomDuStyle` pour une cellule, `row.NomDuStyle` pour une ligne, `column.NomDuStyle`. Les éléments `cell`, `row` et `column` n'exitant pas en HTML, il n'y a pas d'interférence. `NomDuStyle` correspond aux valeurs des attributs `data-od-style` des éléments du tableau.
+
+Le nombre de propriétés acceptées est limitée et dépend du type d'éléments. On consultera les exemples situés dans le répertoire *demos/* pour une meilleure compréhension.
+
+### Propriétés de `column`
+
+- `width` : largeur de la colonne (ne pas oublier l'unité)
+
+### Propriétés de `row`
+
+- `background-color` : couleur de fond de la ligne
+- `height` : hauteur de la ligne (ne pas oublier l'unité)
+
+
+### Propriétés de `cell`
+
+- `background-color` : couleur de fond de la cellule
+- `border` : bordure suivant la syntaxe *0.75pt solid #333* (les déclinaisons en `border-top`, `border-left`, etc. sont possibles)
+- `color` : couleur du texte
+- `font-size` : taille de la police
+- `font-style` : style de la police (*italic*)
+- `font-weight` : graisse de la police (*bold*)
+- `padding` : remplissage (les déclinaisons en `padding-top`, `padding-left`, etc. sont possibles)
+- `text-align` : alignement horizontal du texte
+- `vertical-align` : alignement vertical du texte
+
+### Styles prédéfinis
+
+L'exportation propose des styles prédéfinis qui peuvent être directement utilisés dans les attributs `data-od-style` sans besoin de les déclarer dans le CSS :
+
+- `Bold` : Texte en gras
+- `BoldItalic` : Texte en gras et italique
+- `Header` : Entête de colonne, appliqué par défaut aux éléments `<th>`
+- `Italic` : Texte en italique
+- `Standard` : Style appliqué par défaut aux éléments `<td>`, sans indication particulière
+
+Ces styles peuvent être surchargés par le CSS.