Réglage du Crénage en CSS

Est-il possible avec le CSS pour modifier le crénage en CSS? Je voudrais être en mesure de kern un bloc de texte tel que cela va réellement ressembler à un bloc de texte (les deux bords gauche et droit sont alignés).

EDIT: à l'Aide de http://letteringjs.com/ en conjonction avec http://www.kernjs.com/ fait plutôt bonne crénage. Comme pour le problème d'origine, http://fittextjs.com/ résout ce bien.

Voir la même question et réponses, ici.
vous pourriez également être intéressé par hyphenation.js qui ajoute échéant doux traits d'union, de sorte que l'emballage se produit plus naturellement au lieu d'avoir escalier effets.

InformationsquelleAutor Jeffrey Lo | 2010-10-03

css

32

En tant qu'utilisateur Typeoneerror répondu, letter-spacing ne pas influence de crénage.
Voir la crénage concept à Wikipédia.

Le crénage est pas contrôlé par la lettre de l'espacement, et il n'y a pas font-crénage pour CSS1 ou CSS2. La nouvelle spécification CSS3, n'a pas été approuvé comme norme (Recommandation du W3C), mais il y a bien proposé pour font-kerning, voir 2012 projet de,

http://www.w3.org/TR/css3-fonts/#font-kerning-prop

Seulement des polices spécifiques, comme OpenFonts, ont cette propriété.

CSS pas de contrôles "crénage", mais si l'utilisation de la non-zéro lettre de l'espacement de la "de l'homme crénage perception" peut être perdu. Exemple: améliorer le crénage avec letter-spacing:-0.1em et a perdu avec letter-spacing:0.5em.

Avec CSS1 letter-spacing propriété, vous pouvez perdu ou améliorer crénage perception, et dans une "lettre interligne du texte", vous pouvez simuler le crénage:
```
<div style="font-size:20pt;background-color:#bcd">

  VAST   <small>(normal)</small> 
  <br/>

  <span style="letter-spacing:-0.1em">VAST</span>  
  <small>(enhance perception)</small>
  <br/>

  <span style="letter-spacing:0.5em">VAST</span> 
  <small>(lost perception)</small>
  <br/>

  
  <div style="letter-spacing:6pt">
     SIMULATE: <span style="letter-spacing:4pt">VA</span>ST TEXT
  </div>

</div>
```
Voir le l'exemple ci-dessus ici.

MODIFIER 2014: j'ai pas changé le texte original ci-dessus aujourd'hui, je suis de l'ouverture de la réponse pour que vos modifications (mode Wiki), pour la relecture et mises à jour. Pour le moment ce n'est le plus voté réponse (21 vs 10) et Le HTML5 sera une recommandation... s'il vous Plaît, aider à améliorer ce texte (et/ou le Wikipedia de texte lié!).

InformationsquelleAutor
18

Un certain contrôle sur le crénage peut être réalisé en CSS à l'aide la lettre de l'espacement de l'attribut.

Toutefois, si vous avez besoin d'obtenir "des deux bords gauche et droit aligné", vous pouvez essayer d'utiliser text-align: justify.

EDIT: CSS3 définit un font-crénage propriété qui peut être utilisé pour activer ou désactiver le crénage pour des éléments spécifiques.
- je sais que sa fait 3 longues années, mais pourriez-vous un lien pour le cahier des charges à la place? w3.org/TR/css3-fonts/#font-kerning-prop
- fait (et j'ai déménagé le premier lien pour faire bonne mesure).
InformationsquelleAutor Frédéric Hamidi

Typographiques de l'alignement à la fois de gauche et de droite est appelée la justification. Le crénage est plus sur le réglage des espaces entre les lettres, et n'ont pas beaucoup à voir avec l'alignement (parce que la justification de texte est plus de l'ajustement des espaces entre les mots, de caractères). De toute façon, vous voulez mettre la text-align propriété justify:

<p style="text-align: justify">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum tincidunt ante mollis ornare. Nulla id
    nulla justo. Mauris quis sapien ac orci consequat accumsan. Quisque iaculis ipsum ac nulla venenatis sagittis. Aliquam
    hendrerit mi a turpis malesuada nec dictum est vehicula. Curabitur quis dolor eu metus malesuada dictum adipiscing et
    risus. Aliquam erat volutpat. Aenean pharetra aliquam magna, fringilla tempus erat iaculis eu. Suspendisse potenti.
    Sed fringilla lobortis viverra.
</p>

InformationsquelleAutor typeoneerror

1

Crénage, letter-spacing (aka suivi) et de justifier les blocs sont trois différents typographie propriétés.

Le nouveau lien que j'ai trouvé sur le crénage est de TypeKit, avec des directives sur la façon d'activer le intégré le crénage des données avec leur webfonts. http://blog.typekit.com/2014/02/05/kerning-on-the-web/#comment-19916

Crénage manuel - réglage de l'espace entre chaque lettre dans un mot - sera toujours une question de goût et de préférence. Et peut être réalisé thru kern.js ou kerning.js

Ce qui fait la TypeKit solution se démarquent pour moi, est qu'il permet de crénage pour tous les corps de texte automatiquement en utilisant le méta-données dans les polices OpenType. Je viens de trouver ça, et je suis assez excité à l'utiliser dans mon prochain projet!

Pour en faciliter la consultation, les nouvelles propriétés css discuté dans le lien sont:
```
text-rendering: optimizeLegibility;
font-feature-settings: "kern";
font-kerning: normal;
```
Avec des préfixes pour font-feature-settings y compris:
```
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
```
InformationsquelleAutor jpostdesign
1

Découvrez mon projet ~~Jerning.com~~ [voir ci-dessous] pour le crénage texte.

L'utilisation est très simple et se base sur des paires de caractères, par exemple:
```
<h1>Hello World</h1>
```
La W et o aura l'air bizarre sans le crénage.

Il suffit de faire:
```
$('h1').jerning("Wo", -0.1);
```
qui va appliquer le crénage entre toutes les majuscules Ws et les minuscules os dans h1 balises.

J'ai pris ma retraite le Jerning projet, mais s'il vous plaît trouver le minimisé le code source ci-dessous pour les inclure dans votre projet si vous le souhaitez:
```
(function(b){function e(a,c){var d;if(b.isPlainObject(a))d=a;else try{d=b.parseJSON(a)}catch(f){d=b.parseJSON('{"'+a+'":'+c+"}")}return d}function h(a,c){var d="";b(a).replaceWith(b.map(a.nodeValue.split("").reverse(),function(a,e){var g=a;b.each(c,function(c,e){d==c[1]&&a==c[0]&&(g=b.fn.wrapCharacter(a,e))});d=a;return g}).reverse().join(""))}b.fn.wrapCharacter=function(a,b){return'<span style="letter-spacing:'+b+'em">'+a+"</span>"};b.fn.jerning=function(a,c){var d=e(a,c),f=this.contents();b.each(f,
function(a,c){1==c.nodeType&&b(c).jerning(d);3==c.nodeType&&h(c,d)});return this}})(jQuery);
```
Malheureusement je n'ai pas la non-version minifiée plus; le ci-dessus est livré avec aucune garantie de tous les cas de travail!
- Projet très intéressant! Ce qui permettrait d'installer le crénage des valeurs en général sur un site web pour une police/taille de police etc. Vous êtes-vous avec qui? Le lien de site web n'est pas accessible.
- le site a été modifié pour kerningjs.com
- En fait kerningjs.com un tout autre projet n'a pas de relation de Jerning, dont j'ai pris ma retraite. Bon à savoir quelqu'un de plus intéressé a pris le manteau!
- J'ai posté le code source ci-dessus.
- J'ai aussi trouvé une autre solution, mais en tout cas merci pour cette!
InformationsquelleAutor dav_i
0

Ce qui semble être requise est dynamique, crénage, parce que ce que le Fil de l'Ouvreur et aussi je suis/est dans le besoin est: est-ce justifier n'bloc d'alignement, aussi bien que possible, par l'ajout d'espace entre les mots, ce qui laisse des "trous" dans le bloc de texte. Maintenant, au lieu de la ligne avec aligné à gauche (donc pas d'ajout de l'espace), calculer la largeur physique, de comparer avec bloc de la largeur disponible, diviser la diffrence auge le nombre de lettres dans la ligne, puis utiliser cette valeur comme la letterspace plus. Cela ressemble plus à un journal mise en page que seulement un text-align:justify. Je dois dire tho, je ne suis pas sûr de savoir si les lignes dans un textblock peut être consulté "par le numéro de ligne" dans une dynamique de mise en page, peut-il?
edit: j'ai essayé hier. J'utilise innerHTML pour lire le contenu d'un bloc de texte, puis-je diviser et de le copier à un tableau dont chaque entrée/ligne obtient sa propre balise DIV et id. Ensuite j'ajuste letterspacing en conséquence. Seuls quelques-uns des plus récents navigateurs prennent en charge les sous-pixel-letterspacing, de sorte qu'il ne fonctionne qu'avec les petites et moyennes taille des polices. Le problème que j'ai rencontré est: en raison de l'absence Subpixelsupport il ne fonctionne que dans une certaine mesure, bien qu'agréable à regarder, j'ai donc essayé de justifier le résultat avec l'attribut text-align, mais cela ne fonctionne pas après que j'ai modifié letterspacing.. à Gauche et à droite alignement des œuvres, mais pas de "justifier", celui-ci ne fonctionne qu'avant l'ajout de letterspacing. Pourrait être un opéra problème. Si je peux résoudre ce problème alors je vais poster le code.

modifier 2. il fonctionne maintenant, mais pour une raison que je ne peut pas poster le code ici. c'est à partir de webkit 10.3.3.13 sur mobile. Envoyez-moi un message si vous êtes intéressé dans le code.

InformationsquelleAutor dd_1138

Vous devez vous connecter pour publier un commentaire.