Discussion :

[Beginner.]

Salut,

J'ai une question un peu particulière, j'aimerais faire un éditeur de code avec numéro de ligne et je me demandais si utiliser une table serait une bonne idée sachant qu'il pourrait y a voir un grand nombre de ligne...

Avant cette idée j'étais parti pour utiliser une div par ligne et une par numéro...

Mais j'ai vu qu'il y aurait des avantages à utiliser une table :

- Par exemple en cas de retour à la ligne, la hauteur de ligne peut être multipliée par 2 ou 3 ou plus selon la longueur de la ligne et la largeur de l'éditeur... Alors il faut aussi que la hauteur de la div contenant le numéro soit multiplié par le même nombre... Ce qui se fait automatiquement avec une table...

Mais est-qu'il y a des inconvénients ? Consommation mémoire ? Gestion par le navigateur plus lente ?...

Merci.

[NoSmoking]

Bonjour,

Avant cette idée j'étais parti pour utiliser une div par ligne et une par numéro...

j'aurais tendance à dire qu'à priori on serait plutôt en présence d'une liste ordonnée(<ol>).

[Beginner.]

Salut,

Ah oui on pourrait aussi utiliser une liste à la place des div... Mais il faudra quand même séparer les numéros des lignes de code (deux listes donc)...

Un bout d'image pour fixer les idées :



Pour l'instant ce sont des divs... Mais je me demande si on peut utiliser (avantageusement) une table pour ça (une colonne pour les numéros de ligne et une autre pour les lignes de code).

[NoSmoking]

Je n'avais pas percuté que c'était un éditeur de code, donc bon courage.

Je ne vois pas en quoi une la gestion d'une <table> serait plus avantageuse que la gestion de <div>. En terme de rendu la construction est plus « lente », du moins c'est ce qui se disait jadis.

Dans ton cas tu peux regarder du coté des pseudo-éléments :before pour mettre à jour ta numérotation.

Dans l'idée

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<style>
.editeur div:before {
  content: attr(data-num);
}
</style> 
 
<div class="editeur">
  <div data-num="1">functon test(){</div> 
  <div data-num="2">  // code de la fonction</div> 
  <div data-num="3">}</div> 
</div>

[NoSmoking]

Réflexion faite tu peux même utiliser les compteurs ce qui allège ton code

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
<style>
.editeur {
  counter-reset: num_ligne;
}
.editeur div:before {
  counter-increment: num_ligne;
  content: counter(num_ligne);
}
</style> 
<div class="editeur">
  <div>functon test(){</div> 
  <div>  // code de la fonction</div> 
  <div>}</div> 
</div>

[Beginner.]

Ah intéressant ces des façons de faire, je ne connaissais pas. Merci.

Je n'avais pas percuté que c'était un éditeur de code, donc bon courage.

Merci.

Je ne vois pas en quoi une la gestion d'une <table> serait plus avantageuse que la gestion de <div>.

Eh bien il y a par exemple le point que j'ai évoqué :

- Par exemple en cas de retour à la ligne, la hauteur de ligne peut être multipliée par 2 ou 3 ou plus selon la longueur de la ligne et la largeur de l'éditeur... Alors il faut aussi que la hauteur de la div contenant le numéro soit multiplié par le même nombre... Ce qui se fait automatiquement avec une table...

En image : la ligne 3 est longue, il y a deux retour à la ligne, la hauteur de la div est trois fois plus grande, il faut donc qu'il en soit de même pour la div contenant le numéro 3 ---> il faut ceci :



et non ceci :



- Je ne sais pas si c'est possible de détecter un retour à la ligne mais au pire je pourrais vérifier la hauteur à chaque frappe d'une touche et à chaque fois que l'éditeur est redimensionné ?

Je ne vois pas en quoi une la gestion d'une <table> serait plus avantageuse que la gestion de <div>. En terme de rendu la construction est plus « lente », du moins c'est ce qui se disait jadis.

Ah justement c'est ce que je craignais d'où mes questions...

Merci.

[NoSmoking]

En utilisant des « pseudo-élements » tu auras exactement le résultat escompté.

Un exemple un peu plus complet :
Le CSS un peu plus poussé

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
.editeur {
  counter-reset: num_ligne;
  width: 40em;
  padding: .25em;
  padding-left: 2.25em;
  border: 1px solid #CCC;
  font: 1em/1.25 "Courrier New",monospace;
}
.editeur div {
  position: relative;
  white-space: pre-wrap;
}
.editeur div:nth-child(odd) {
  background: #F0F0F0;
}
.editeur div:before {
  content: counter(num_ligne);
  counter-increment: num_ligne;
  display: block;
  position: absolute;
  left: -2.5em;
  width: 2em;
  height: 100%;
  padding-right: .25em;
  border-right: 1px solid #ABC;
  text-align: right;
  font-size: .8em;
  color: #888;
  background: inherit;
}

Le HTML permettant de voir l'alignement

Code html :

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

1
2
3
4
5
6
<div class="editeur" contenteditable>
  <div>function test(){
    var nom_de_variable_un_peu_long_obligeant_un_passage_a_la_ligne = "nom de variable un peu long obligeant un passage à la ligne";</div>
  <div>  // suite du code de la fonction</div>
  <div>}</div>
</div>

[Beginner.]

Merci.

Oui j'ai vu que ça marchait bien avec les pseudos éléments et justement j'ai voulu mettre de la marge avec padding mais tu as ajouté encore plus de choses ce qui est encore mieux...

J'ai testé ici : http://jsbin.com/hoseyadana/edit?css,output et ça marche bien !