Créer un tableau en diagonale

[dadovb]

Bonjour à tous,
Je galère un peu pour mettre en place le design de mon site web et j'ai besoin de conseils.
J'essaye de mettre en place un tableau pour écrire un texte qui se justifie en diagonale, comme ceci :

c'est l'exemple du texte
bonjour à tous, voici
mon texte en
diagonale
merci

Et je n'ai pas trouver d'autres moyens que de faire un tableau pour chaque ligne de mon texte, ce qui est très contraignant, car des que je modifie une phrase ou un mot, je dois tout replacer.
N'y aurait-il pas un moyen automatique pour mettre en forme mon texte comme je le souhaite ?

Merci d'avance pour votre aide

 

[mr_go]

Hu... pas comprite!
Ta citation me laisse perpelexe....

:\

 

[MarvinLeRouge]

Salut,

Je ne vois pas l'utilité des tableaux.
Si c'est du php, tu pourrais te baser sur un comptage des lettres et simplement rajouter des sauts de ligne aux endroits appropriés.

 

[dadovb]

Je veux donner un effet escalier au bord droit de mon texte :

aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaa
aaaaaaaaaaaaa
aaaaaaaaaaa
aaaaaaaaa
aaaaaaa
aaaaa
aaa

Et j'aimerais qu'il soit automatique, et si possible pas en php, mon serveur ne gère que le javascript et l'html.

 

[DIEZ]

en gros il veut trransformer automatiquement un texte de ce type :

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa


en ça


aaaaaaaaaaaaaaaa
aaaaaaaaaaaaa
aaaaaaaaaa
aaaaaaa
aaaa
aa
a

 

[Bacteries]

Bah si c'est du HTML et Js y'a rien de dynamique donc le texte il le rentre en dur, suffit donc de mettre un <br> au bon endroit et d'aligner à gauche... de façon manuelle...

(dommage que tu n'es pas du PHP, ça se fait en 3 lignes... )

 

[dadovb]

Et ca se fait comment en php ?
Au cas ou j'arriverais a configurer mon serveur ?

 

[spidetra]

Ce que tu décrit correspond à une suite arithmétique.
La longueur de chaque ligne se déduit de la précédente en enlevant r mots. [EDIT] J'ai remplacé caractères par mots [/EDIT]

Un+1 = Un + r ( dans ton cas r est négatif ).

- taille totale du texte que tu veux mettre en triangle : S
- nbr de ligne que tu veux : n
- Uo : taille de la plus petite ligne de ton triangle
- Un : taille de la plus grande ligne de ton triangle

S = ( n * ( Uo + Un ) ) / 2

r = ( Un - Uo ) / n

A partir de ces deux formules tu devrait pouvoir en déduire l'algo qui te permettra de faire un triangle quelque soit tes contraintes ( longueur de ton texte, nbr de ligne, taille de ton incrément ).

c'est peut-être possible de coder ça en javascript.

 

[DIEZ]

Ca risque d'être plus compliqué que prévu.

Au vu de son exemple, il ne veut pas tronquer ses mots, et toi dans ta formule tu enleves un nombre constant de lettre, au risque d'en perdre la cohérence du texte.

mais il lui faudrait aussi quelque chose qui verifie (dans le premier cas) si le dernier mot (qui est tout seul : "merci" dans l'exemple) n'est pas plus grand que la ligne du dessus auqyel cas il faut agrandir la ligne du début et recommencer.

La solution est dans la récursivité : bonne chance pour l'algo...


Au fait, pourquoi vouloir un tableau en diagonale ?

 

[graphic3000]

Comme de l'habillage d'un bloc image dans un logiciel de mise en page comme Xpress, par exemple.
Ici, il faudrait partir d'un triangle - mais là ça m'échappe.

 

[dadovb]

C'est pour une question de mise en page, ca s'intégrerait beaucoup mieux dans le design de mon site et j'aimerais bien savoir faire.

 

[dadovb]

En fait c'est beaucoup plus compliqué que prévu à mettre en place, si je me retrouve avec un mot comme "anticontitutionnellement" je suis obligé de le découper, de ce style :
"anticonstitutionnel-
lement"

Et je suis quasiment persuédé que pour un moteur de recherche "bat-eau" n'est pas égal à bateau et il ne comprends pas que c'est de la grammaire française.

Donc je me demande si je ne vais pas abandonner, car meme si j'arrive à découper mes mots, cela nuira à mon référencement.

Merci à tous

 

[spidetra]

En fait c'est beaucoup plus compliqué que prévu à mettre en place, si je me retrouve avec un mot comme "anticontitutionnellement" je suis obligé de le découper, de ce style :
"anticonstitutionnel-
lement"

ça deviens chaud là

 

[mowmow]

J'y suis presque, je te tiens au courant ^^

 

[mowmow]

Voilou ca marche pas mal mais il faudrait trouver un algo qui trouverait un nombre de caractères en dernière ligne

Joue avec les paramètres et voit ce qui te convient

<?php
function triangleFormat($chaine, $facteur = 7, $n_1 = 0, $n_2 = 0, $char = 0, $marge = 0, $separator = '<br />') {
	$mots = explode(' ', $chaine);
	
	// Le nombre de caractères dans la première ligne, l'algo ci-dessous marche pas trop mal, donc pas besoin de chercher
	if($n_1 === 0 || !is_int($n_1)) {
		$n_1 = round(strlen($chaine)*$facteur/count($mots));
	}
	
	// Le nombre de caractères dans la dernière ligne, pas encore trouvé d'algo
	if($n_2 === 0 || !is_int($n_2)) {
		$n_2 = 5;
	}
	
	// Le nombre de caractères en moins dans la ligne L2 par rapport à L1, ca passe mieux avec $char pas trop grand
	if($char === 0 || !is_int($char)) {
		$char = 3;
	}
	
	// La marge possible où on accepte que le mot déborder de X caractères
	if($marge === 0 || !is_int($marge)) {
		$marge = 5;
	}
	
	// Le nombre de lignes en théorie
	$lignes_base = floor(($n_1-$n_2)/$char);
	
	// On initialise les variables
	$len = null;
	$nb = 0;
	
	// On boucle dans la chaîne
	for($i=$lignes_base; $i>=0; $i--) {
		// Nombre de caractères dans la ligne $i
		$ligne[$i] = $n_2+$i*$char;
		
		// Tant que la ligne ne dépasse pas le nombre de caractères, on ajoute le mot à la ligne
		while(strlen($len) < $ligne[$i]) {
			// De combien peut-on dépasser le nombre de caractères de la ligne $i ?
			if(strlen($len.$mots[$nb]) > ($ligne[$i]+$marge)) {
				break 1;
			}
			// On ajoute le mot en cours à la ligne
			$len .= $mots[$nb].' ';
			
			// On passe au mot suivant
			$nb++;
		}
	// On enregistre la ligne
	$lignes[$i] = trim($len);
	
	// Si la ligne est vide, on la supprime
	if(empty($lignes[$i])) {
		unset($lignes[$i]);
	}
	
	// On remet $len à 0
	unset($len);
	}
	
	// Hop, on retourne le résultat
	return implode($separator, $lignes);
}
?>

Quelques tests :

echo triangleFormat('Cette chaîne va être divisée de telle manière à être affichée en triangle, en espérant que ca marche bien. Voilà, apparament ca à l\'air de marcher, sauf pour certains mots qui sont plus long que d\'autres hélas !');

echo '<br /><br />';

// On voit ici que si $n_1 est trop petit, on a pas tout la chaîne
echo triangleFormat('Cette chaîne va être divisée de telle manière à être affichée en triangle, en espérant que ca marche bien. Voilà, apparament ca à l\'air de marcher, sauf pour certains mots qui sont plus long que d\'autres hélas !', 0, 30, 5, 5, 5, '<br />');

En espérant que ca te convienne

Ce qui donne :

Cette chaîne va être divisée de telle
manière à être affichée en triangle,
en espérant que ca marche bien.
Voilà, apparament ca à l'air
de marcher, sauf pour certains
mots qui sont plus long
que d'autres hélas !


Cette chaîne va être divisée de
telle manière à être affichée
en triangle, en espérant
que ca marche bien.
Voilà,
apparament

 

[Malaiac]

Tu as pas essayé en CSS ?

J'ai pas essayé, mais on peut faire des formes diagonales avec CSS, aussi bizarre que ca puisse paraitre...
Genre ca : http://ultra-fluide.com/contents/mondri ... drian.html ...
c'est du CSS, ca tient en 5 lignes, vi.

Y a toute la page ici : http://ultra-fluide.com/ressources/css/css-mondrian.htm (insigne renault, ligne oblique, triangle, etc.)

Avec un petit margin qui va bien, ca pourrait être sympa (par contre pour la césure )

 

[jerome347]

c'est du CSS, ca tient en 5 lignes, vi.

Il joue avec des border (comme pour la CSS House) et on peut difficillement mettre du texte dans un border