Module:StyleM
La documentation de ce module Scribunto écrit en Lua est incluse depuis sa sous-page de documentation.
{{Module|nom du module}} · {{Modèle utilisant les modules Lua}}Modules de base :
Documentation module · String · List · Wikibase · TNTLe module:StyleM contient le code pertinent pour traduire les commandes wsCss en commandes CSS, lesquelles sont ensuite inscrites dans <div style="commandes CSS">texte</div>. Tout autre information, notamment des commandes CSS, sont simplement copiées.
Exemples modifier
Voyez ces exemples :
Paramètres dans l'appel de modèle modifier
Le module reconnaît des mots-clés qui sont (le plus souvent) suivis de valeurs, lesquels peuvent être suivis d'unités (px, %, em...). Chaque séquence, que ce soit <mot-clé>, <mot-clé>:<valeur> ou <mot-clé>:<valeur><unité>, doit être terminée par un point-virgule (;). Notez les deux-points entre <mot-clé> et <valeur>. Ces séquences, qui sont dans les faits des commandes, appartiennent au langage « wsCss » (CSS de Wikisource).
Par exemple, cette commande wsCss
i; t:80; align:c;
est traduite en commande CSS
font-style: italic; font-size: 80%; text-align: center;
| Descriptif | Mot-clé wsCss |
Mot-clé CSS |
Valeur | Exemple en wsCss |
Exemple en CSS |
|---|---|---|---|---|---|
| Taille (unité implicite : %) |
t | font-size | <nombre> |
t:80 | font-size: 80%; |
| Taille | fs | font-size | <nombre><unité> |
fs:80% | font-size: 80%; |
| Alignement | align | text-align | l (left)r (right)j (justify)c (center)g (gauche)d (droite)j (justifié)c (centré) |
align:g | text-align: left; |
| Marge 4 directions | m | margin | <nombre><unité> |
m:2px | margin: 2px; |
| Marge haut (Margin top) |
mh, mt | margin-top | <nombre><unité> |
mt:1em | margin-top: 1em; |
| Marge droite (Margin right) |
md, mr | margin-right | <nombre><unité> |
md:1em | margin-right: 1em; |
| Marge bas (Margin bottom) |
mb | margin-bottom | <nombre><unité> |
mb:1em | margin-bottom: 1em; |
| Marge gauche (Margin left) |
mg, ml | margin-left | <nombre><unité> |
ml:3px | margin-left: 3px; |
| Italique | i | (voir exemple) | nil | i | font-style: italic; |
| Petites majuscules (small caps) |
sc | (voir exemple) | nil | sc | font-variant: small-caps; |
| Police de caractères (font) |
ff | font-family | <police>,<police>... |
ff:serif | font-family: serif; |
| Couleur des caractères | fc, ct | color | <couleur> |
fc:black | color: black; |
| Couleur du fond (background-color) |
bc, cf | background-color | <couleur> |
bc:black | background-color: black; |
| Gras (bold) |
gr, b | (voir exemple) | nil | g, b | font-weight: bold; |
| Hauteur | h | height | <nombre><unité> |
h:100px | height: 100px; |
| Largeur (Width) |
lg, w | width | <nombre><unité> |
l:100px | width: 100px; |
| Interlettre | ls, sp | letter-spacing | <nombre><unité> |
ls:2px | letter-spacing: 2px; |
| Intermot | ws | word-spacing | <nombre><unité> |
ws:5px | word-spacing: 2px; |
| Hauteur de la ligne (Line height) |
lh | line-height | <nombre><unité> |
lh:12px | line-height: 2px; |
| Tampon 4 directions | pad | padding | <nombre><unité> |
pad:2px | pad: 2px; |
| Tampon haut (Padding top) |
padt | padding-top | <nombre><unité> |
padt:1em | padding-top: 1em; |
| Tampon droite (Padding right) |
padr | padding-right | <nombre><unité> |
padr:1em | padding-right: 1em; |
| Tampon bas (Padding bottom) |
padb | padding-bottom | <nombre><unité> |
padb:1em | padding-bottom: 1em; |
| Tampon gauche (Padding left) |
padl | padding-left | <nombre><unité> |
padl:3px | padding-left: 3px; |
| Indentation | indent | text-indent | <nombre><unité> |
indent:2em | text-indent: 2em; |
| Soulignement | sou | (voir exemple) | nil | sou | text-decoration: underline; |
| Surlignement | sur | (voir exemple) | nil | sur | text-decoration: overline; |
Le CSS, et donc wsCss, accepte des nombres décimaux positifs et négatifs. Le séparateur décimal est le point. Les unités usuelles sont %, em et px (exemples : -1.5em, 83%). D’autres unités de mesure sont disponibles ; consulter la section Property Values de [1] et les sections Relative Lengths et Absolute Lengths de [2].
Pour les couleurs, utilisez l'un des mots-clés du CSS qui se trouvent dans MDN Web docs ou quackit. Le module accepte également bleu, gris, noir, rouge et vert.
Pour les polices de caractères, utilisez l'un des mots-clés du CSS qui se trouvent dans Tutorial Brain. En CSS, il est possible d'indiquer plusieurs polices, voyez les explications de cette page.
Le module reconnaît à la fois le langage CSS et le langage wsCss. Par exemple, cette commande est correcte : i; font-size:80%; align:c;. Dans ce cas, l'usage du langage CSS a rallongé la commande. Le langage wsCss propose, selon ses concepteurs, des substituts pour les mots-clés les plus utiles à la mission des wikisourciens. Il est possible de proposer des substituts wsCss pour beaucoup de mots-clés CSS, mais les concepteurs jugent que la liste actuelle des mots-clés wsCss suffit dans le cadre de Wikisource.
Paramètres dans le code du modèle modifier
Aucun
--[[
Le module StyleM[ulti] sert à construire un style CSS à partir d’une chaîne
de caractères composée des propriétés écrites en conformité à la W3C ou
de raccourcis ou mots-clés en usage dans la communauté ws.fr.
EXEMPLE :
Appel à partir d’une page Wikisource ou d’un module :
{{#invoke:styleM|cssProps|align:c; i; il:2em;fs:10;;gris;bp:2;white-space:nowrap}}
Réponse obtenue :
text-align:center;font-style:italic;margin-top:2em;margin:bottom:2em;
font-size:10%;color:grey;padding-bottom:2em;white-space:nowrap;
TEST :
=p.valid("align:c; i; il:2em;fs::10;;gris;bp:2;0white-space:nowrap; co co;test:;font-size:90%;abc")
]]
local p = {}
local args = {}
------------------------
-- Table des correspondances pseudo-code -> code CSS
------------------------
local exist = {} -- pour éviter la duplication d’une propriété
local val = ''
------------------------
-- Table des codes de propriétés
------------------------
local c = {}
c['t'] = 'font-size'
c['fs'] = 'font-size'
c['align'] = 'text-align'
c['l'] = 'left'
c['g'] = 'left'
c['r'] = 'right'
c['d'] = 'right'
c['il'] = 'margin-top;margin-bottom'
c['m'] = 'margin-top;margin-bottom'
c['mt'] = 'margin-top'
c['mb'] = 'margin-bottom'
c['ml'] = 'margin-left'
c['mr'] = 'margin-right'
c['mh'] = 'margin-top'
c['mg'] = 'margin-left'
c['md'] = 'margin-right'
c['i'] = 'font-style'
c['b'] = 'font-weight'
c['gr'] = 'font-weight'
c['sc'] = 'font-variant'
c['ff'] = 'font-family'
c['ct'] = 'color'
c['fc'] = 'color'
c['bc'] = 'background-color'
c['cf'] = 'background-color'
c['h'] = 'height'
c['w'] = 'width'
c['lg'] = 'width'
c['ls'] = 'letter-spacing'
c['sp'] = 'letter-spacing'
c['ws'] = 'word-spacing'
c['lh'] = 'line-height'
c['pad'] = 'padding-top;padding-bottom'
c['padt'] = 'padding-top'
c['hp'] = 'padding-top'
c['padb'] = 'padding-bottom'
c['bp'] = 'padding-bottom'
c['padl'] = 'padding-left'
c['gp'] = 'padding-left'
c['padr'] = 'padding-right'
c['dp'] = 'padding-right'
c['padh'] = 'padding-top'
c['padg'] = 'padding-left'
c['padd'] = 'padding-right'
c['indent'] = 'text-indent'
c['sou'] = 'text-decoration'
c['sur'] = 'text-decoration'
c['gris'] = 'color'
c['noir'] = 'color'
c['rouge'] = 'color'
c['vert'] = 'color'
c['bleu'] = 'color'
c['dib'] = 'display'
c['top'] = 'top'
------------------------
-- Table des suffixes
------------------------
local s = {}
s['t'] = '%'
s['il'] = 'em'
s['bp'] = 'em'
s['hp'] = 'em'
s['gp'] = 'em'
s['dp'] = 'em'
s['fs'] = '%'
s['align'] = 'em'
s['l'] = 'em'
s['g'] = 'em'
s['r'] = 'em'
s['d'] = 'em'
s['m'] = 'em'
s['mt'] = 'em'
s['mb'] = 'em'
s['ml'] = 'em'
s['mr'] = 'em'
s['mh'] = 'em'
s['mg'] = 'em'
s['md'] = 'em'
s['h'] = 'em'
s['w'] = 'em'
s['lg'] = 'em'
s['ls'] = 'em'
s['sp'] = 'em'
s['ws'] = 'em'
--c['lh'] = 'em'
s['pad'] = 'em'
s['padt'] = 'em'
s['hp'] = 'em'
s['padb'] = 'em'
s['bp'] = 'em'
s['padl'] = 'em'
s['gp'] = 'em'
s['padr'] = 'em'
s['dp'] = 'em'
s['padh'] = 'em'
s['padg'] = 'em'
s['padd'] = 'em'
s['indent'] = 'em'
------------------------
-- Table des codes de valeurs
------------------------
local v = {}
v['i'] = 'italic'
v['b'] = 'bold'
v['gr'] = 'bold'
v['sc'] = 'small-caps'
v['l'] = 'left'
v['g'] = 'left'
v['r'] = 'right'
v['d'] = 'right'
v['c'] = 'center'
v['j'] = 'justify'
v['sou'] = 'underline'
v['sur'] = 'overline'
v['gris'] = 'grey'
v['noir'] = 'black'
v['rouge'] = 'red'
v['vert'] = 'green'
v['bleu'] = 'blue'
v['dib'] = 'inline-block'
local wsCss = ""
local errCod = ""
------------------------
-- Fonction disponible à partir des pages de Ws ou d’un module
------------------------
function p.cssProps( frame )
local str
args = frame.args
if args[1] == nil then
args = frame:getParent().args
end
str = args[1] or ''
if str == '' then
return ''
end
return p.toCss(str)
end
------------------------
-- Conversion en CSS des pseudo-codes
-- Si duplication d’une propriété, seule la première occurence est conservée
-- toCss peut être appelé d’un autre module
-- Ex. : vraiCSS = require(Module:StyleM).toCss('align:c; i; il:2')
------------------------
function p.toCss(text)
local segments = {}
local props = {}
local exist = {}
local css = ''
local i = 1
if text ~= nil and text ~= '' then
text = p.valid(text)
segments = p.split(text, ';')
while segments[i] ~= nil do
props = p.split(segments[i], ':')
truePropName = c[props[1]] or props[1]
if not exist[truePropName] then
exist[truePropName] = true
val = v[props[2]] or v[props[1]] or props[2]
if tonumber(val) ~= nil then
val = val .. (s[props[1]] or '')
end
css = css .. p.join(truePropName, val)
end
i = i + 1
end
end
return css
end
------------------------
-- Un peu différent de mw.text.split
------------------------
function p.split(str, sep)
mots = {}
n = 1
pattern = "([^" .. sep .. "]+)" .. sep .. "%s*"
for jeton in mw.ustring.gmatch(str .. sep, pattern) do
mots[n] = mw.text.trim(jeton)
n = n + 1
end
return mots
end
------------------------
-- Assemblage propriété:valeur; wsCss->Css
------------------------
function p.join(codes, value)
local css = ''
local parts = p.split(codes, ';')
for i, v in ipairs( parts ) do
css = css .. v .. ':' .. value .. ';'
end
return css
end
------------------------
-- Retranchement des éléments non valides
------------------------
function p.clean(err)
local pat = string.gsub(err, "[%(%)%.%+%-%*%?%[%]%^%$%%]", "%%%1")
wsCss = mw.ustring.gsub(wsCss, pat, '')
if errCod ~= '' then errCod = errCod .. ' ; ' end
errCod = errCod .. err
end
------------------------
-- Validation de la chaîne de codes wsCSS
------------------------
function p.valid(code)
wsCss = code
errCod = ''
for i,v in ipairs(mw.text.split(code,';', true)) do
v = mw.text.trim(v)
-- un code ne peut commencer par un chiffre
if tonumber(mw.ustring.sub(v,1,1)) ~= nil then
p.clean(v)
-- un code sans valeur doit être inclus dans la table c[]
elseif #mw.text.split(v,':', true) ==1 and c[v] == nil and v ~= '' then
p.clean(v)
else
for j,w in ipairs(mw.text.split(v,':', true)) do
w = mw.text.trim( w )
-- un code ne peut contenir 2 valeurs précédées par :
if j == 3 then
p.clean(v)
break
-- un code ne contient pas d’espace
elseif j == 1 and w ~= '' and #mw.text.split(w,' ', true) > 1 then
p.clean(v)
break
-- tout code de moins de 4 caractères doit être inscrit dans c[]
elseif j == 1 and mw.ustring.len( w ) < 4 and (c[w] == nil or w == '') then
p.clean(v)
break
-- : doit être suivi d’une valeur
elseif j == 2 and w == '' then
p.clean(v)
break
end
end
end
end
if errCod ~= '' then
mw.addWarning( '{{rouge|Les styles suivants ne sont pas reconnus : }}' .. errCod )
end
return wsCss --.. '\n' .. errCod
end
return p