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 !