Discussion :

[naute]

Bonjour .

Existe-t-il un moyen simple (autre qu'une image) de représenter un vecteur, c'est à dire une lettre surmontée d'une flèche, dans un texte HTML? J'ai cherché sur w3schools.com et je n'ai rien trouvé la-dessus, que ce soit dans les entités (utf8), balises, attributs ou CSS3.

Un truc du genre

Code CSS :

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

1
2
3
4
5
 
.vecteur
{
  text-decoration: overarrow;
}

m'aurait bien plu mais overarrow n'existe pas, bien entendu. Ce ne serait pourtant pas plus compliqué à implémenter que overline et à priori pas moins utile.

Merci d'avance,

naute.

[Invité]

Bonjour,

voilà qui devrait faire la farce :

Code html :

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

<span class="vecteur">A</span>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.vecteur
{
  position: relative;
  display:inline-block;
}
.vecteur:after
{
  position: absolute;
  display:block;
  content:'→';
  top:-0.5em;
  left:-0.1em;
}

Lire : content:'→';

[naute]

Bonjour ,

et avant tout, merci pour ta réponse.
Alors voici ce que ça donne pour le code HTML suivant:

Code :

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

1
2
 
vecteur <span class="vecteur">A</span> = vecteur <span class="vecteur">B</span>

Avec la ligne CSS

Code :

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

1
2
 
content:'→';

Capture d'écran du résultat:


Excellent: on sent qu'on n'est pas loin . Le problème est que ce n'est pas l'entité qu'il faut saisir, mais la flèche elle-même: Mon erreur vient du fait que quand tu as saisi la flèche dans ton exemple, elle a été traduite par son entité dans les balises "code".

Avec la ligne CSS modifiée dans ce sens, le résultat devient
Capture d'écran du résultat:


L'affichage du vecteur est impeccable .
Cependant, la distance séparant le vecteur du texte le précédant est trop grande. Y-a-t-il moyen de la diminuer?

Si je modifie la classe "vecteur" comme suit,

Code :

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

1
2
3
4
5
6
7
 
.vecteur
{
  position: relative;
  left: -30px;
  display:inline-block;
}

j'obtiens

c'est à dire que je ne fais que déplacer le décalage. Ce n'est esthétiquement pas plus satisfaisant. Ce qu'il faudrait, c'est réduire l'espace global entre le texte qui précède et le texte qui suit le vecteur, espace dans lequel celui-ci s'affiche. Mais est-ce possible?

Autre question n'ayant rien à voir: Pourquoi le code de mon message précédent n'a-t-il pas de coloration syntaxique?

Amicalement,

naute.

[Invité]

Bonjour,

1/ En effet, j'avais bien mis la flèche elle-même mais pas son code HTML.
Lire : content:'→';

2/ Par contre, avec le code que je t'ai donné, je n'ai pas de décalage du texte : http://codepen.io/jreaux62/pen/bwzQaE
Chez toi, il doit venir d'une autre instructionCSS.

3/ Pour activer la coloration syntaxique, il faut indiquer le langage voulu : [CODE=css]

Code css :

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

.ici { ducode:css; }

[naute]

2/ Par contre, avec le code que je t'ai donné, je n'ai pas de décalage du texte : http://codepen.io/jreaux62/pen/bwzQaE
Chez toi, il doit venir d'une autre instructionCSS.

Eh oui! Absolument. Mes paragraphes sont indentés avec

Code CSS :

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

1
2
3
4
5
6
 
p
{
  text-align: justify;
  text-indent: 30px;
}

et c'est répercuté, je ne vois d'ailleurs pas trop pourquoi, dans la classe "vecteur" ou dans le "span".

J'ai donc modifié la classe comme suit

Code CSS :

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

1
2
3
4
5
6
7
 
.vecteur
{
  position: relative;
  display:inline-block;
  text-indent: 0px;
}

et c'est tout bon.

3/ Pour activer la coloration syntaxique, il faut indiquer le langage voulu : [CODE=css]

Code css :

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

.ici { ducode:css; }

Je ne savais pas. C'est enregistré!

encore, amicalement,

naute