Colonnes de journaux HTML
Je suis en train de créer un journal de colonnes de style à l'aide d'un bloc de texte. Je voudrais que le texte soit uniformément répartie sur 2 colonnes qui pourrait réagir à la variation de la longueur du texte.
Est-ce possible en utilisant seulement l'HTML et le CSS, si ce n'est peut javascript être utilisé?
Grâce
source d'informationauteur
Vous devez vous connecter pour publier un commentaire.
Deux remarques:
Donc je suppose que le JS est votre meilleur pari, mais il ne fonctionne pas pour les utilisateurs ayant désactivé le JS, bien sûr.
Si vous décidez de le faire, il est déjà possible dans Mozilla et WebKit (et Prince) avec uniquement du CSS:
C'est du CSS3 spec, et Moz/Webkit déjà mis en œuvre avec le fournisseur de préfixes. Utiliser le
column-count
etcolumn-gap
propriétés:Note que, bien sûr, ce ne sont pas pris en charge par toutes les versions de IE que personne n'utilise. CanIUse.com revendications 10 IE va l'appuyer dans le cadre de CSS3.
CSS3 permet de transformer n'importe quel nœud HTML contenu dans un certain nombre de colonnes. Il y a des propriétés pour contrôler le nombre de colonnes ainsi que leur largeur, la hauteur relative ("fill", ou comment le contenu est réparti à travers les colonnes existantes), gouttière entre les colonnes, la "règle" (ligne de démarcation ou frontière), etc.
Comme un point de départ, voir la w3schools.com CSS3 Plusieurs Colonnes page de référence.
Cependant, comme d'habitude, c'est à dire le seul parmi largement utilisé les navigateurs ne prend pas en charge la colonne - propriétés CSS3.
Un cross-browser est la solution de Colonnisseur Plugin jQuery.
CSS3 vous permettra de le faire avec leur plusieurs colonnes de soutienmais pour le moment, vous ne pouvez probablement pas compter sur de très nombreux navigateurs à supporter, alors vous aurez probablement besoin de s'appuyer sur une autre méthode.
Je suis d'accord avec PhiLho. Si vous voulez continuer à essayer le code js pour le partage de vos contenus en deux colonnes est assez simple, si les colonnes ont des largeurs fixes. Le problème est de décider de diviser le contenu. Vous ne voulez probablement pas à split, dans le milieu d'un mot, etc.
Vous pouvez essayer avec le scénario suivant: Ajouter deux colonnes dans votre page. Mettre votre texte dans la première colonne (ce qui permet non js navigateurs pour toujours afficher votre contenu). Obtenir le texte avec js (eg. à partir d'événement onload). Trouver le prochain indice de la "." (ou si vous avez des paragraphes "< /p>") en commençant par le milieu. L'utilisation de cet indice pour diviser le texte et de mettre la première partie de retour dans la première colonne et ainsi de suite...
La IHT a une belle mise en œuvre de 3 colonnes format. Il semble toutefois être calculée à côté serveur, je pense, par comptage de mots.
Ici est un simple (pas de CSS friendly) fonction javascript qui va le faire:
Placer votre texte dans un élément quelque part, et de l'appeler Newspaperize(yourelement) lorsque le chargement de la page.
Remarque: cette fonction divise le texte en deux. Pour vraiment fonctionner correctement, vous souhaitez trouver un espace ou un trait d'union la plus proche du milieu et de diviser le texte.
Comme d'autres l'ont dit - pas quelque chose qui est possible avec de la vanille CSS/XHTML (au moins pas jusqu'à ce que nous obtenir une large CSS3 🙂
Toutefois, le port de mon expérience de l'utilisateur chapeau, je serais intéressé par votre cas d'utilisation pour le vouloir sur une page web (en supposant que c'est une étape normale de la page web que vous ciblez). Contrairement à l'impression de la division d'un bloc de texte sur deux colonnes, peuvent rendre plus difficile à lire. Si c'est plus qu'un écran, puis l'utilisateur doit faire beaucoup de défilement haut et bas pour scanner/tout lire.
Soi - même si vous pouvez le faire avec un peu de JS piratage - peut-être mieux de trouver une autre conception qui n'en a pas besoin.
Alors que je cherchais une réponse à cette question, malheureusement, au début je n'ai pas vraiment trouvé, maintenant 3 heures plus tard, je l'ai fait.
J'ai trouvé une lib JavaScript qui utilise les attributs css3 (si j'ai bien compris, seulement essayé de le faire fonctionner et il l'a fait, va lire dans le js plus tard )
lib trouve ici: http://www.csscripting.com/wiki/index.php?title=CSS3_Multi_Column
le seul inconvénient est que le texte que vous voulez avoir multicolumned doit être entre les deux balises ( je préfère utiliser
<p>
tag, comme il prend également en charge plusieurs<p>
balises.)testé en ff 3.6, ie 8, opera 10.51 et chrome 4.1.
Je ne suis pas dans la position de test pour les anciens navigateurs, donc je vous recommande de quelqu'un que bientôt ;P
cheers!
J'ai réussi à faire quelque chose comme cela, mais encore une fois, pas dans le CSS, j'ai utilisé PHP pour compter le nombre de mots et de diviser le texte. Malheureusement les mots de comptage est une assez mauvaise façon de le faire, car certains mots sont plus longs que les autres et les colonnes ne correspondent pas. Mon design a été inspiré par l'IHT site web. Il n'est pas très difficile à mettre en œuvre dans PHP.