différents.

Version imprimable

Bonjour à tous,

Ceci est ma deuxième intervention sur le forum - je suis novice et autodidacte et je rencontre un problème que je n'arrive pas à résoudre malgré des heures de tentatives - j'espère que vous pourrez m'aider.

Dans le cadre d'une édition électronique d'un texte romanesque dont il existe deux versions (variantes textuelles), je souhaiterais générer en HTML un affichage parallèle des deux versions du texte ; mon souhait serait que les paragraphes concernés (voire les autres) se correspondent en vis-à-vis.

Mon texte est balisé en XML-TEI et en voici la structure (mais peut-être n'est-ce déjà pas un bon balisage source... ?) :
Code:

1 2 3 4 5 6 <TEI> <teiHeader>...</teiHeader> <body> <div ana="version1_du_texte"><p ana="X" class="alignes">#PCDATA</p><p>#PCDATA</p><p>#PCDATA</p></div> <div ana="version2_du_texte"><p ana="X" class="alignes">#PCDATA</p><p>#PCDATA</p><p>#PCDATA</p></div> </body></TEI>
Qui génère un HTML :
Code:

1 2 3 <div class="body"> <div class="version1_du_texte"><p ana="X" class="alignes">#PCDATA</p><p>#PCDATA</p><p>#PCDATA</p></div> <div class="version2_du_texte"><p ana="X" class="alignes">#PCDATA</p><p>#PCDATA</p><p>#PCDATA</p></div>
Je me demande comment aligner en CSS ces <p class="alignes">, sachant qu'ils se trouvent dans deux <div> différents. Peut-être est-ce impossible ?

Voici ma tentative de CSS (je suis encore plus novice...), mais je vois parfaitement qu'elle n'est pas viable :
Code:

1 2 3 4 5 p.alignes { display:block; width:48%; margin: 0px 0px 0px 0px; }
Je vous remercie par avance pour l'aide que vous voudrez bien m'apporter.
Jonas.

Bonjour,

la question principale est : "quelle différence entre les classes "version1_du_texte" et "version2_du_texte" ?

Une solution pourrait être :

Code:

1
2
<div class="version1_du_texte palignes"><p ana="X">#PCDATA</p><p>#PCDATA</p><p>#PCDATA</p></div>
<div class="version2_du_texte palignes"><p ana="X">#PCDATA</p><p>#PCDATA</p><p>#PCDATA</p></div>

Code:

1
2
3
4
5
6
7
8
9
10
div.version1_du_texte.palignes p {
 display:block;
 width:48%;
 margin: 0px 0px 0px 0px;
}
div.version2_du_texte.palignes p {
 display:block;
 width:48%; /* ??? */
 margin: 0px 0px 0px 0px;
}

Bonjour jreaux62 et merci pour ton aide !

Je pense avoir été plutôt imprécis dans mon exposé.
En fait, chacun des deux <div> comprend une centaine de paragraphes ; parmi eux, certains sont des copies conformes, d'autres présentent des variantes de quelques mots, et certains paragraphes sont présents dans la <div> qui correspond à la version 1 du texte mais absents dans l'autre, et réciproquement.

Grossièrement, mon HTML ressemble à ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 <div class="version1_du_texte"> <p>Bonjour</p> <p>Il était une fois</p>  </div> <div class="version2_du_texte"> <p>Bonjour vous</> <p>Il était une fois</p> <p>Coucou, je suis un paragraphe supplémentaire par rapport à l'autre div</p> </div>
En écrivant ça, je réalise qu'à mon avis, il faut absolument que je crée une ancre pour lier les paragraphes équivalents d'un div à l'autre (ou bien, un attribut commun)...
J'obtiendrais alors ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div class="version1_du_texte"> <p class="1">Bonjour</p> <p class="2">Il était une fois</p> <p class="3"/>  </div> <div class="version2_du_texte"> <p class="1">Bonjour vous</> <p class="2">Il était une fois</p> <p class="3">Coucou, je suis un paragraphe supplémentaire par rapport à l'autre div</p>  </div>
Le problème qui demeure concerne l'alignement des paragraphes alors qu'ils sont dans deux blocs <div> différents.
Je me demande si la solution ne serait pas d'insérer dans un seul et unique <div> mes deux versions du texte l'une à la suite de l'autre.

J'ai l'impression d'être un peu confus dans mes explications, j'en suis désolé - je tourne en rond depuis une bonne demi-journée et ça me tape sur le système - je vais faire une petite pause et revenir ensuite... :)
Merci !