Bonjour,

Voulant tester les BBcodes, pour le retrait, centrage et l'alignement à droite.

Je me suis rendu compte qu'un espace s'était inséré entre deux bloc dont voici l'exemple:

Et voici le code regex avec le CSS intégré dedans, j'ai volontairement mis le surlignage le temps des tests.

$texte = preg_replace('#\[retrait\](.*)\[/retrait\]#isU', '<span style="margin-left: 40px; background-color: yellow;">$1</span>', $texte); // tabulation
$texte = preg_replace('#\[center\](.*)\[/center\]#isU', '<span style="display: block; text-align: center; background-color: yellow;">$1</span>', $texte); // écris au milieu 
$texte = preg_replace('#\[right\](.*)\[/right\]#isU', '<span style="display: block; text-align: right; background-color: yellow;">$1</span>', $texte); // écris à droite

Je voudrais savoir si on peut éventuellement supprimer cette espace ?? j'ai vu quelque technique de bidouillage qui fonctionne tel que supprimer les espaces entre les balises

<div>
<p>texte</p><p>texte</p><p>texte</p>
</div>

ou mettre de faux commentaire

<div>
<p>texte</p><!-- @whitespace
--><p>texte</p><!-- @whitespace
--><p>texte</p>
</div>

Mais, le souci, c'est comment l’intégrer dans le code.

-
Edité par ricem 11 novembre 2019 à 18:43:39

Bonjour.

L'espace visuel entre les paragraphes ne proviennent pas des espaces laissés entre les balise, mais du formatage par défaut des paragraphes.

Tu les supprimes de cette façon en CSS :

p .sansMarge {margin: 0;}

Cordialement.

Bonjour Domi65, J'ai testé cette solution, mais sans résultat

Hello, 

donne une classe unique pour appliquer ton margin via la feuille css externe, essais...

Tu utilises des <span>  ?

Sinon passe les en inline-block + margin : 0;

-
Edité par Lucky13 11 novembre 2019 à 14:20:37

Lucky13, j'ai testé mais rien, je donne le code qui traite les commentaires

<?php
						
// Récupération des commentaires
	$req = $bdd->prepare('SELECT pseudo, commentaire, DATE_FORMAT(date_commentaire, \'%d/%m/%Y à %Hh%i \') AS date_commentaire FROM commentaires WHERE id_billet = ? ORDER BY id LIMIT ?, ?');
	$req->bindValue(1,  $LID);
	$req->bindValue(2, (int) $pageStart, PDO::PARAM_INT);
	$req->bindValue(3, (int) $msgPage, PDO::PARAM_INT);
	$req->execute();			
	while ($donnees = $req->fetch())

{
echo '<div class="commentaire">
<p class="line"> Posté le ' .$donnees['date_commentaire']. 'par <b>' .htmlspecialchars($donnees['pseudo']). '</b>.<br/>
<span style="color: blue;">' .nl2br(texte(htmlspecialchars($donnees['commentaire']))). '</span> </p>			 
</div>';
}
						
$req->closeCursor();
?>	

J'ai essayé de l'intégrer dedans, et aussi dans la partie regex, mais c'est bizarre tout ça...!! je pense plus à un bug, mais ça vient pas du navigateur ayant essayé sur firefox, chrome et opera avec le même resultat.

-
Edité par ricem 11 novembre 2019 à 18:47:57

Bonjour ricem ,

Il est possible d'avoir la valeur non modifiée issue de la base de $donnees['date_commentaire'] et de $donnees['commentaire'] qui donne le résultat de l'image de ton premier commentaire

Bonjour AliasDmc, tu veut dire à l'intérieur du message ? sinon c'est du bbcode :

[retrait]test de texte en retrait[/retrait] 
[center]test de texte centrer[/center]
[right]test de texte à droite[/right] 

et le regex est plus haut, après, je ne sais pas si j'ai bien compris ta demande

Bonjour ricem ,

En fait, j'ai essayé de reproduire le code final une fois passé dans toutes les fonctions php pour mieux comprendre

En fait ton espace indésirable, si j'ai bien interprété le code final vient d'un <br> (nl2br()) qui se trouve entre deux span de type display:block

Tu n'as pas le bug entre les 2 premiers span car l'un est inline et l'autre display:block

Je t'ai un exemple de correction :

https://codepen.io/Zonecss/pen/NWWLdab

-
Edité par AliasDmc 12 novembre 2019 à 18:15:22

Bonjour AliasDmc,

j'ai ajouté un "display:block" dans la balise du retrais comme ci-dessous pour voir le comportement :

$texte = preg_replace('#\[retrait\](.*)\[/retrait\]#isU', '<span style="display:block; margin-left: 40px; background-color: yellow;">$1</span>', $texte); // tabulation

Ensuite, j'ai fait un test en mettant comme ceci :

[retrait]test de texte en retrait[/retrait] 
[center]test de texte centrer[/center]
[right]test de texte à droite[/right] 

et en mettant comme ceci sans le retour à la ligne :

[retrait]test de texte en retrait[/retrait][center]test de texte centrer[/center][right]test de texte à droite[/right] 

Et voici le résultat avec et sans le retour à la ligne :

Effectivement, on constate bien le saut de ligne "<br> (nl2br())" sur le premier test, et sur le deuxième il n'y a plus de saut page, vu que dans le message original il y en a pas.

Mais là, j'essaie de comprendre ce que je doit modifié dans la partie qui traite le commentaire, le 1er ou le 2éme "code généré proposé" ou les deux, j'avoue, je suis un peut perdu n'étant pas un pro .

Je continue à explorer en faisant des test.

-
Edité par ricem 14 novembre 2019 à 14:55:56

Bonjour à tous, je peux répondre car j'ai accès aux sources. (si celle-ci n'ont pas trop évolué ces derniers mois)

Bonjour ricem, vu ton MP, je n'ai pas eu le temps de regarder le code et faire des test plus tôt.

Je ne comprends pas bien le problème que tu soulèves ici. En quoi l'affichage d'un espace entre les différentes parties que l'utilisateur poste  est  problématique?  Pour ma part je trouve qu'un texte aérer est plus lisible.

Bref, la solution donnée par AliasDmc est sémantiquement correct, effectivement chaque partie de texte entré par l'utilisateur devrait ce trouver dans un paragraphe. Mais pour ce faire il faut modifier le fichier commentaires.php car tu as mis toutes les données des utilisateurs ainsi que la présentation du commentaire dans un seul paragraphe, ce qui n'est sémantiquement pas correct.   ( d’où présence des span pour ton  BBcodes, ce qui suscite l’étonnement de Luky)

 J'avais proposé à l'époque de modifier le display du span pour que le centrage et l'alignement à droite puisse s'afficher. Si tu retravailles cette partie, Je trouve qu'il faut repenser l'affichage de l’ensemble du bloque de commentaire et insérer des balises comme <time>   pour le temps ce qui serais sémantiquement plus correct. (mais je connais ta position par rapport au référencement c'est pourquoi je n'avais pas relevé cela.)

Je n'ai pas de solution concernant le retrait du <br> générer par la fonction nl2br() dans certain cas particulier. Le fait d'indiquer des paragraphes avec un margin de zéro comme le propose  AliasDmc n'est pas fonctionnelle car nl2br() génère un retour ligne après chaque paragraphe.

La seul solution que j'ai trouvé est un margin négatif, mais pour être cohérent (en fonction du code que j'ai)  il faut appliquer ce margin négatif sur chaque portion de code entrer par l'utilisateur et pour qu'il s'applique il faut passer le tout en block. 

Donc soit tu rustines comme je te le propose ci après soit tu repenses la présentation des commentaires. A toi de voir ( si problème je dois pouvoir me dégager du temps ce WE)  

Fichier "/require/bcode_smiley.php"    (bien que l'usage d'une class CSS serrait plus profitable à mon sens )

	$texte = preg_replace('#\[retrait\](.*)\[/retrait\]#isU', '<span style="display:block; margin:-23px 0 0 40px;  background-color: yellow;">$1</span>', $texte); // tabulation
	$texte = preg_replace('#\[center\](.*)\[/center\]#isU', '<span style="display:block; margin-top:-23px; text-align: center; background-color: yellow;">$1</span>', $texte); // écris au milieu
	$texte = preg_replace('#\[right\](.*)\[/right\]#isU', '<span style="display:block;  margin-top:-23px; text-align: right; background-color: yellow;">$1</span>', $texte); // écris à droite

Édit : GRRR salop***** de forum qui n'affiche pas le code correctement; je recopie une ligne de code en texte pour que ce soit compréhensible :  (les - sont à retirer )

$texte = preg_replace-('#-\-[right\-]-(.*)\-[-/right\-]#isU', '<span style="display:block;  margin-top:-23px; text-align: right; background-color: yellow;">$1</span>', $texte); // écris à droite

Appliquer au texte de couleur également cela me donne : 

En postant un plus long commentaire j'ai remarqué que je ne pouvais pas scroller sur le textarea. Pour permettre le scroll ajoute overflow-y: auto; sur la class .form

En espérant que cette solution te convienne.

a+

-
Edité par AbcAbc6 14 novembre 2019 à 9:08:40

Bonsoir AbcAbc6,

C'est vrai que je chipote pour pas grand chose , surtout que le Bbcode me sera réservé que pour mon utilisation personnelle, à la limite c'est à moi de mettre des saut de page (ou pas) dans les messages 

Sinon concernant les <span> je les ai supprimer pour les remplacer par des <div> ce qui me permet de supprimer les "display: block" par la même occasion.

J'ai testé le code avec les margin-top en négatif, mais ça me donne pas les mêmes résulats, du moins pour le div "posté le......", voici le code:

<?php
$texte = preg_replace('#\[retrait\](.*)\[/retrait\]#isU', '<div style="margin: -15px 0 0 40px; background-color: yellow;">$1</div>', $texte); // tabulation
$texte = preg_replace('#\[center\](.*)\[/center\]#isU', '<div style="text-align: center; margin:-15px; background-color: yellow;">$1</div>', $texte); // écris au milieu 
$texte = preg_replace('#\[right\](.*)\[/right\]#isU', '<div style="text-align: right; margin-top: -15px; background-color: yellow;">$1</div>', $texte); // écris à droite
?>

Et j'ai également changer les <span> pour des <div> dans commentaire.php comme ceci :

<div class="commentaire">
    <div class="line"> Posté le ' .$donnees['date_commentaire']. 'par <b>' .htmlspecialchars($donnees['pseudo']). '</b>.</div>
    <div style="color: blue;">' .texte(nl2br(htmlspecialchars($donnees['commentaire']))). '</div>		 
</div>';

-
Edité par ricem 16 novembre 2019 à 11:30:18