web-dev-qa-db-fra.com

Est-il possible d'activer la césure automatique en HTML / CSS?

Mon client a demandé d'activer la césure automatique sur cette page: http://carlosdinizart.com/biography/ , et j'ai réalisé que je ne l'avais jamais vu faire sur une page Web.

Est-il possible de configurer la césure automatique dans un document HTML avec seulement HTML/CSS? Sinon - quelles sont les options?

htmlcsshyphenation
39
hanazair

CSS3 fournit un support pour cela. Source: http://drublic.de/blog/css3-auto-hyphenation-for-text-elements/ Vous pouvez consulter la documentation w3c ici: http: //www.w3 .org/TR/2011/WD-css3-text-20110901/# césure

CSS3 ajoute six propriétés à la liste des choses utiles. Ceux-ci sont:

  • Le plus important est hyphens.
  • Vous pouvez ajouter des fichiers de dictionnaire avec hyphenate-resource pour que le navigateur ait plus de chances de rendre votre texte avec la césure appropriée.
  • hyphenate-before définit un nombre minimum de caractères avant la césure.
  • hyphenate-after fait la même chose que hyphenate-before mais pour les caractères après la césure.
  • hyphenate-lines définit le nombre maximum de lignes écrites par un mot coupé. avec hyphenate-character vous pouvez spécifier l'entité HTML à utiliser, par exemple \2010.

La propriété principale de cette pile est hyphens. Il accepte l'une des trois valeurs: none, manual ou auto. La valeur par défaut est manuelle, où vous pouvez définir des tirets via ­. auto c'est le meilleur pour le texte continu tandis que les mots sont divisés si possible et disponibles. Et none ne coupe pas du tout même s'il existe un jeu de caractères pour un saut de ligne possible dans un certain mot.

Mise à jour:

Informations de support du navigateur ici: http://caniuse.com/css-hyphens

39
Ninja

Une option consiste à insérer tirets doux dans le texte aux endroits où il peut être rompu. Le trait d'union doux est représenté par l'entité ­ en HTML. Vous pouvez trouver des bibliothèques/outils qui peuvent préparer du texte automatiquement avec ­s aux bons endroits, sinon vous devrez le faire manuellement.

13
deceze

Pour traiter une page dont la largeur est fixe pour le texte, la solution pratique consiste à ajouter quelques caractères SOFT HYPHEN (U + 00AD), en utilisant la référence d'entité ­ si vous trouvez cela plus confortable que d'entrer le caractère (invisible) lui-même. Vous pouvez trouver assez rapidement quels mots doivent être coupés pour produire un bon résultat.

Dans un cas plus complexe (plusieurs pages, largeur flexible), utilisez un préprocesseur, un code côté serveur ou un code côté client qui ajoute des traits d'union doux. L'approche côté client est la plus simple et peut être appliquée indépendamment des technologies côté serveur et des outils de création. Attention, la césure automatique peut mal tourner et a besoin d'aide: la ou les langues du texte doivent être indiquées dans le balisage (ou autrement, selon la bibliothèque utilisée).

Au minimum, vous pouvez simplement mettre les attributs lang=en class=hyphenate dans le <body> tag et le code suivant dans la partie head:

<script 
  src="http://hyphenator.googlecode.com/svn/tags/Version%204.0.0/Hyphenator.js">
</script>
<script>Hyphenator.run();</script>

Démo: http://bytelevelbooks.com/code/javascript/hyphenation.html (texte à largeur flexible, avec juste la largeur maximale définie, vous pouvez donc le tester en variant la largeur de la fenêtre du navigateur).

9
Jukka K. Korpela

Actuellement, mon css pour <p> est

p   {
    font-style: normal;
    padding: 0;
    margin-top: 0;
    margin-left: 0px ;
    margin-right: .5em ;
    margin-bottom: 0;
    text-indent: 1em;
    text-align: justify;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    Word-break:break-Word;
    hyphens: auto;
}

Cela ne fonctionne pas pour Chrome 39 sur Mac. Connu pour ne pas fonctionner sur Opera. Fonctionne pour Firefox, iOS Safari.

Ce n'est PAS infaillible: les colonnes étroites (moins de 6 mots) sont laides, mais dans l'ensemble, la mise en page ressemble beaucoup plus à un type correctement défini.

3
Sherwood Botsford