Discussion :

[patricktoulon]

re Bonjour a tous

decidement aujourd'hui

voila toujours mon wysiwyg perso je voudrais mettre le texte de chaque items d'une balise select dans une balise (Hx) correspondant a leur texte

et visiblement les balise (options n'acceptent pas les balise (H) tout du moins le texte reste le même pour tout les items

quelqu'un a une idée pour appliquer cela

ou l'équivalent en size des balises H

merci pour les retours

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<select class="selects" size="7">
<option selected=""><H1> Titre&nbsp; H1</H1></option>>
<option><h2>Titre&nbsp; H2 </h2></option>
<option>Titre&nbsp; H3</option>
<option>Titre&nbsp; H4</option>
<option>Titre&nbsp; H5</option>
<option>Titre&nbsp; H6</option>
<option>Titre&nbsp; H7</option>
</select>

[Invité]

Ce n'est pas possible en utilisant du HTML.
la balise option ne peut contenir que du texte (https://www.w3.org/TR/html5/forms.ht...option-element).
Les navigateurs ignoreront le contenu HTML d'une telle balise.
Il faudra utiliser du CSS ou du Javascript.

[patricktoulon]

Bonjour GlobuleVert
ok bien reçu
je vais donc m'orienter vers du css inline pour mettre les font.size aux options
javascript je sais pas si c'est pour styler en dom c'est pareil si c'est autre chose il faudra m'expliquer
il me reste a trouver les fontsizes équivalents
merci pour le retour

[Invité]

Oui c'est l'idée, CSS ou JS selon vos préférences.
J'opterai plus pour des classes CSS que du inline.
Le inline sert plus pour faire des tests en mode larrache, norme ISO-1664.
Une fois le style fixé, je fabriquerai les classes correspondantes.
Par contre pour l'aspect WYSIWYG, je pense que ça va être une bataille de navigateurs.
Il n'y a aucune garantie que le rendu d'une balise H dans un navigateur utilise les mêmes propriétés que dans un autre.

[NoSmoking]

Bonjour,

Oui c'est l'idée, CSS ou JS selon vos préférences.

non CSS uniquement dans ce cas le javascript est totalement inutile si l'on passe par des classes comme tu le dis plus loin.

il me reste a trouver les fontsizes équivalents

Default style sheet for HTML 4 globalement bien respecté.

Je le recopie ici pour info

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }
 
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }
 
*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }
 
@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

pour info <h4> est par défaut à font-size: 1em.

[patricktoulon]

re
bonsoir NoSmoking
merci c'est bon avec le font size "em" c'est juste un peu plus petit j'ai pris les taille dans ton exemple

[Invité]

Je parlais du JavaScript, parce que le CSS ne permet que d'approcher la problématique du WISIWYG.
Le rendu d'une balise est complètement dépendant de l'implémentation choisi par le navigateur.
Il n'existe aucune norme qui obliqge à ce qu'une balise H1 soit rendue en fontSize 28 ou 32 pixels ou 1em.
C'est le choix des développeurs du navigateur.
Et pour obtenir ce genre d'informations, le CSS ne sert pas à grand chose.
Donc pour connaitre la taille de la police et toutes les autres propriétés de style utilisées par un navigateur pour rendre une balise, vous pouvez
- soit procéder par essai et échec, en CSS, jusqu'à avoir un résultat visuellement satisfaisant, sans garantie que ce soit exactement les mêmes propriétés que celle du navigateur testé, et même sans garantie que les autre navigateurs utiliseront les même propriétés pour le rendu d'une même balise.
- soit utiliser le JavaScript pour obtenir directement et concrètement les propriétés utilisées par le navigateur, quand c'est possible, ce que le CSS est incapable de vous fournir.
Voici un exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="title1">Title1</h1>
<h2 id="title2">Title2</h2>
<p id="text">Text</p>
<script type="text/javascript">
function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels on IE
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return (function(value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}
alert ("h1 fontSize = " + getStyle(document.getElementById("title1"), "fontSize") 
        + "\n" + "h1 marginBottom = " + getStyle(document.getElementById("title1"), "marginBottom")
        + "\n" + "h1 fontFamily = " + getStyle(document.getElementById("title1"), "fontFamily")
        + "\n" + "h1 width = " + getStyle(document.getElementById("title1"), "width")
        + "\n" + "h2 fontWeight = " + getStyle(document.getElementById("title2"), "fontWeight")
        + "\n" + "p fontSize = " + getStyle(document.getElementById("text"), "fontSize")
        + "\n" + "p width = " + getStyle(document.getElementById("text"), "width"));
</script>
</body>
</html>

Executez ce code sur différents navigateurs et constatez les différences.
D'autre part, en préambule du document que vous citez, il est bien écrit "This appendix is informative, not normative".
Ce n'est pas une norme, juste un texte informatif. Il n'y a aucune obligation à s'en tenir à ce document pour fabriquer un navigateur.
Et enfin, il est incomplet pour devenir une norme, il se contente d'énumérer quelques propriétés indicatives mais pas la totalité des propriétés necessaires au rendu de chaque balise.
Pour le WISIWYG, d'autres problématiques peuvent ensuite se présenter comme la correspondance em et pixel, qui n'est pas une norme non plus (approximativement 1em = 16px, mais ce n'est garantit nulle part : https://css-tricks.com/css-font-size/, notemment le paragraphe "em").
L'unité em est une propriété du monde de l'impression papier (c'est la largeur de la lettre M Majuscule dans une police de caractère donnée) que les concepteurs du CSS on tenté d'appliquer, avec plus ou moins de succès, aux écrans, qui utilisent des pixels.
Sinon donnez moi l'équivalent de l'exmple en JavaScript, le tout sur plusieurs navigateurs, en CSS.

[patricktoulon]

Bonjour GlobuleVert
oui j'avais compris
de toute façon pour l'instant le WYSIWYG ira soit dans un fichier HTML ouvert par IE soit un HTA( application HTML) soit un control ActiveX "WebBrowser" dans un userform VBA Excel

me forçant ainsi a travailler avec les librairies qu'utilisent ces 3 contextes

1. le webbrowser utilise la librairie IE 09 (avec balise meta on peut aller au CSS2 et dom 2,IE 10)
2. le HTA a peu pres pareil avec un peu plus d'option fonctionnelles (Css3,DOM1,2)
3. le html librairie utilisée par la version de IE installée

le résultat est tout de même satisfaisant sur les 3

pour les autre contextes a cas ou par la suite d'autre voudraient utiliser mon wysiwyg/Maileur je rajouterais les webkit dans le CSS mais j'en suis pas encore la

pour le moment je créé les boutons en html et applique le style 1 (couleur proche de DVP)

jusqu'à présent les boutons étaient dans le userform VBA Excel et pilotaient les fonctions javascript du document html(wisiwyg)dans le control activx

comme tu peut le comprendre j'ai beaucoup de chose a prendre en compte

pour les hX ca me convient c'était juste pour avoir un visuel

je garde quand même ta petite fonction qui est bien intéressante afin de connaitre les propriétés ca pourrait m'aider a faire la balance entre le pire et le meilleur en ce qui concerne la compatibilité visuelle des navigateurs
Merci beaucoup

[Invité]

je garde quand même ta petite fonction qui est bien intéressante afin de connaitre les propriétés ca pourrait m'aider a faire la balance entre le pire et le meilleur en ce qui concerne la compatibilité visuelle des navigateurs
Merci beaucoup

Cette fonction n'est pas la mienne. Remerciez Christian C. Salvadó pour ce code.
J'ai qwantifier votre question et j'ai obtenu ça : https://gist.github.com/cms/369133

[NoSmoking]

@GlobuleVert :
Tout d'abord je tiens à préciser que ma réponse a été faite en rapport avec cette discussion !

Il n'existe aucune norme qui obliqge à ce qu'une balise H1 soit rendue en fontSize 28 ou 32 pixels ou 1em.
(...)
Ce n'est pas une norme, juste un texte informatif. Il n'y a aucune obligation à s'en tenir à ce document pour fabriquer un navigateur.

Il n'existe que des « recommandations » et il y a consensus sur ce point là, taille des Hx entre autres, pour le plus grand bonheur des utilisateurs. Tous les navigateurs, depuis IE9, initialisent par défaut les tailles des <Hx> avec les mêmes valeurs en em, unité choisi pour respecter, entre autre, le choix personnel de l'utilisateur.

C'est le choix des développeurs du navigateur.

Ils se « plient » quand même à ces recommandations, il n'est qu'a observer les styles par défaut appliqués sur les différents navigateurs.

• [WebKit] https://trac.webkit.org/browser/trun...e/css/html.css ;
• [Mozilla] https://dxr.mozilla.org/mozilla-cent...e/res/html.css ;
• [IE] http://www.iecss.com/, pas trouvé mieux pour IE.

L'unité em est une propriété du monde de l'impression papier ...

em est une unité relative à la taille de la police du parent, on est loin de son origine typographique si ce n'est l’abréviation.

(approximativement 1em = 16px, mais ce n'est garantit nulle part ...

Non tu fais un raccourci un peu rapide de l'article que tu cites. Il faut regarder la configuration par défaut, modifiable par l'utilisateur et d'autre part cela va dépendre de la taille de la police du conteneur de l'élément.

Donc pour connaitre la taille de la police et toutes les autres propriétés de style utilisées par un navigateur pour rendre une balise...

La méthode getComputedStyle permet effectivement de récupérer le style, non pas utilisé mais rendu, d'un élément et à cette fin une unité en em ne serait d'aucune utilité alors qu'en px, unité écran, cela a une signification.
Mettre des unités en px fige l'affichage, dans le sens où si l'on modifie la taille de la police par défaut, via le paramétrage navigateur, l'affichage de la page ne prendra pas en compte cette modification et donc le choix de l'utilisateur ne sera pas respecté. L'unité em a bien d'autres vertus.
Bon d'accord, il existe toujours la possibilité de zoomer.

Sinon donnez moi l'équivalent de l'exmple en JavaScript, le tout sur plusieurs navigateurs, en CSS.

Dans le cas qui concerne cette discussion l'approche, via un <select> n'est, pour moi, pas une bonne approche, il y a moyen de s'affranchir complétement de la configuration courante, mais ce n'était pas l'objet de celle ci, et comme on me demande mon avis voici l'approche que j'aurais faite, sans manipuler de CSS autre que la mise en page.

Voici en gros ce que j'aurais fais dans un petit exemple.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset ="UTF-8">
<title>Style Titre</title>
<meta name="Author" content="NoSmoking">
<style>
#main {
  margin: auto;
  max-width: 60em;
}
.format {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.format:hover > ul {
  display: block;
}
.btn {
  padding: .25em;
  border: 1px solid #888;
  font-weight: 700;
}
.format ul {
  display: none;
  position: absolute;
  top: 100%;
  margin: -1px 0 0;
  padding: 1px;
  min-width: 10em;
  border: 1px solid #888;
  list-style: none;
  background-color: #FFF;
}
.format ul :not(empty) > * {
  display: block;
  margin: 0;
  text-decoration: none;
  color: #000;
}
.format ul a {
  padding: .25em;
  border: 1px solid transparent;
}
.format ul a:hover {
  border: 1px solid #CCC;
  background: #EEE;
}
</style>
<script>
function setStyle(param){
  var oDest = document.querySelector('#appercu');
  var contenu = oDest.textContent;
  if( param){
    contenu = '<' +param +'>'+ contenu +'<\/' +param+'>'
  }
  oDest.innerHTML = contenu;
  return false;
}
</script>
</head>
<body>
<div id="main">
  <h1>Affectation style</h1>
  <p><i>Le texte ci dessous est modifiable</i></p>
  <p id="appercu" contenteditable>Texte de démo</p>
  <div class="format">
    <div class="btn">Hx</div>
    <ul>
      <li>
        <a href="#" onclick="return setStyle()">
          Normal
        </a>
      </li>
 
      <li>
        <a href="#" onclick="return setStyle('H1')">
          <h1>Titre 1</h1>
        </a>
      </li>
      <li>
        <a href="#" onclick="return setStyle('H2')">
          <h2>Titre 2</h2>
        </a>
      </li>
      <li>
        <a href="#" onclick="return setStyle('H3')">
          <h3>Titre 3</h3>
        </a>
      </li>
      <li>
        <a href="#" onclick="return setStyle('H4')">
          <h4>Titre 4</h4>
        </a>
      </li>
      <li>
        <a href="#" onclick="return setStyle('H5')">
          <h5>Titre 5</h5>
        </a>
      </li>
      <li>
        <a href="#" onclick="return setStyle('H6')">
          <h6>Titre 6</h6>
        </a>
      </li>
    </ul>
  </div>
</div>
</body>
</html>