CSS texte justifier par l'espacement des lettres

y a-t-il un moyen de justifier automatiquement les mots en utilisant l'espacement des lettres, chacun dans sa rangée, à une largeur définie, en utilisant CSS?

par exemple, "quelque chose comme ça" ressemblerait à quelque chose comme ça:

"Something like this" would look something like this

y a-t-il une façon non-Obscure d'appliquer un tel style à mon texte? Je crois que CSS pur n'a pas cette option (du moins pas avec les versions CSS avant 3, CSS3 semble avoir un text-justify propriété, mais il n'est pas encore bien pris en charge), donc js solutions serait très bien aussi.

24
demandé sur Groo 2010-12-04 21:10:02

9 réponses

Voici un script qui peut le faire. Ce n'est pas joli, mais peut-être que tu peux le pirater pour répondre à tes besoins. (Mis à jour pour gérer le redimensionnement)

<html>
<head>
<style>
#character_justify {
    position: relative;
    width: 40%;
    border: 1px solid red;
    font-size: 32pt;
    margin: 0;
    padding: 0;
}
#character_justify * {
    margin: 0;
    padding: 0;
    border: none;
}
</style>
<script>
function SplitText(node)
{
    var text = node.nodeValue.replace(/^\s*|\s(?=\s)|\s*$/g, "");

    for(var i = 0; i < text.length; i++)
    {
        var letter = document.createElement("span");
        letter.style.display = "inline-block";
        letter.style.position = "absolute";
        letter.appendChild(document.createTextNode(text.charAt(i)));
        node.parentNode.insertBefore(letter, node);

        var positionRatio = i / (text.length - 1);
        var textWidth = letter.clientWidth;

        var indent = 100 * positionRatio;
        var offset = -textWidth * positionRatio;
        letter.style.left = indent + "%";
        letter.style.marginLeft = offset + "px";

        //console.log("Letter ", text[i], ", Index ", i, ", Width ", textWidth, ", Indent ", indent, ", Offset ", offset);
    }

    node.parentNode.removeChild(node);
}

function Justify()
{
    var TEXT_NODE = 3;
    var elem = document.getElementById("character_justify");
    elem = elem.firstChild;

    while(elem)
    {
        var nextElem = elem.nextSibling;

        if(elem.nodeType == TEXT_NODE)
            SplitText(elem);

        elem = nextElem;
    }
}

</script>
</head>
<body onload="Justify()">
<p id="character_justify">
Something<br/>
Like<br/>
This
</p>
</body>
9
répondu Dark Falcon 2010-12-06 00:05:27

je sais que c'est un vieux sujet, mais j'ai fait face à l'autre soir. Et trouvé une solution appropriée à l'aide de tables.

chaque lettre doit être mise dans un <td> </td> je sais que ça a l'air ennuyeux, mais si vous voulez faire ça, ce serait pour un mot ou deux, non? Ou vous pouvez toujours utiliser JS pour le remplir si c'est trop. Cependant, ce n'est que CSS et solution très polyvalente.

en utilisant l'espacement des lettres les lettres sont distribuées correctement. Vous devez jouer avec, en fonction de la largeur de la table.

#justify {
  width: 300px;
  letter-spacing: 0.5em;
}
<table id="justify">
  <tbody>
    <tr>
      <td>J</td>
      <td>U</td>
      <td>S</td>
      <td>T</td>
      <td>I</td>
      <td>F</td>
      <td>Y</td>
    </tr>
  </tbody>
</table>

voir l'exemple ici

Crossbrowser sûr, pratiquement rien ne doit différer. Est juste en CSS.

Je l'ai utilisé dans mon site web qui est en anglais et en espagnol. le sous-titre sous mon nom en espagnol a une lettre supplémentaire et il sortira la largeur. Utilisation des tableaux expliqués ci-dessus, il est distribué de la même largeur automatiquement. J'ai dû définir une condition pour que chaque langue fasse le tour.

4
répondu Tony B 2016-02-16 00:16:47

la seule solution css est text-justify: distribute https://www.w3.org/TR/css-text-3/#text-justify mais le soutien est encore très faible.

une petite expérience en utilisant text-align-last: justify et en ajoutant des espaces entre les lettres.

div{
	display:inline-block;
	text-align: justify;
	text-align-last: justify;
	letter-spacing: -0.1em;
}
<div>
S o m e t h i n g<br>
l i k e<br>
t h i s
</div>
4
répondu PoseLab 2017-08-03 11:56:13

Voici une autre approche utilisant un extrait de jQuery que j'ai écrit pour cette question: texte extensible pour s'adapter largeur de div :

DÉMO

HTML:

<div class="stretch">Something</div>
<div class="stretch">Like</div>
<div class="stretch">This</div>

jQuery:

$.fn.strech_text = function () {
    var elmt = $(this),
        cont_width = elmt.width(),
        txt = elmt.html(),
        one_line = $('<span class="stretch_it">' + txt + '</span>'),
        nb_char = elmt.text().length,
        spacing = cont_width / nb_char,
        txt_width;

    elmt.html(one_line);
    txt_width = one_line.width();

    if (txt_width < cont_width) {
        var char_width = txt_width / nb_char,
            ltr_spacing = spacing - char_width + (spacing - char_width) / nb_char;

        one_line.css({
            'letter-spacing': ltr_spacing
        });
    } else {
        one_line.contents().unwrap();
        elmt.addClass('justify');
    }
};


$(document).ready(function () {
    $('.stretch').each(function () {
        $(this).strech_text();
    });
});
2
répondu web-tiki 2017-05-23 11:47:12

avait besoin de cela aussi, donc j'ai regroupé la technique suggérée dans un simple pour utiliser jQuery-plugin vous pouvez trouver ici: https://github.com/marc-portier/jquery-letterjustify#readme .

il utilise la même procédure à son cœur, et ajoute quelques options pour modifier. Commentaires bienvenus.

2
répondu mpo 2014-09-14 18:47:44

encore une fois, je sais que C'est vraiment vieux, mais pourquoi ne pas simplement mettre un espace entre chaque lettre et puis texte-aligner:justifier? Chaque lettre serait alors considérée comme un "mot" et justifiée en conséquence

0
répondu JBarnes 2014-08-15 03:30:04

Une autre façon de gérer cela pourrait être d'utiliser le "vw" dimensionnement de l'unité. Ce type d'unité peut être utilisé dans les propriétés de taille de police et représente un pourcentage de la largeur de la fenêtre.

Avertissement: Ce n'est pas exactement ce que vous cherchez, mais ne nécessite pas de script. Il ajuste la taille du texte, mais il s'adapte aussi à la largeur de votre page.

par exemple,

.heading {
  font-size: 4vw;
}

fera la largeur d'un caractère dans la police courante de 4% de la largeur de la fenêtre.

vous pouvez alors utiliser media queries si vous souhaitez verrouiller la taille de la police à une taille minimale basée sur la largeur de la fenêtre.

@media only screen and (max-width: 768px) {
    font-size: 2rem;
}

utilisez l'inspecteur de navigateur pour jouer avec la propriété font-size et modifier la valeur de ce qui a du sens pour votre application.

l'unité " vw " fonctionne dans IE9+, iOS 8.3+ et Android 4.4+ et tous les autres navigateurs grand public. Je ne voudrais pas s'inquiéter du support mobile trop, car vous pouvez utiliser les requêtes Médias pour mettre le bon dimensionnement pour ces appareils comme décrit ci-dessus.

http://caniuse.com/#feat=viewport-units

https://css-tricks.com/viewport-sized-typography/

les unités de Viewport sont un moyen puissant pour mettre à l'échelle de nombreux aspects différents de votre site avec peu de code.

0
répondu Neil Monroe 2015-04-30 23:39:42

je viens de faire un script JQuery de L'approche Tony B de table. Voici le JSFiddle https://jsfiddle.net/7tvuzkg3/7 /

ce script crée une table avec chaque caractère dans une rangée. Cela fonctionne avec la phrase complète. Je ne suis pas sûr que c'est entièrement optimisé.

justifyLetterSpacing("sentence");

function justifyLetterSpacing(divId) {

	// target element
	domWrapper = $('#' + divId).clone().html('');
	// construct <td>
	$('#' + divId).contents().each(function(index){
      // store div id to td child elements class
	  var tdClass = divId ;
      // split text 
	  $textArray = $(this).text().split('');
      // insert each letters in a <td>
	  for (var i = 0; i < $textArray.length; i++) {
        // if it's a 'space', replace him by an 'html space'
        if( $textArray[i] == " " )  {
            $('<td>')
                .addClass(tdClass)
                .html("&nbsp;&nbsp;")
                .appendTo(domWrapper);
        }// if it's a char, add it
        else{  
            $('<td>')
                .addClass(tdClass)
                .text($textArray[i])
                .appendTo(domWrapper);
        }
	  }
	});
    // create table
    table = 
    $( "<table id='"+divId+"'/>" ).append( 
        $( "<tbody>" ).append( 
            $( "<tr>" ).append( 
                ( domWrapper ).children('td') 
            ) 
        )
    );
    // replace original div
	$('#' + divId).replaceWith( table );
}	
#sentence {
  width : 100%;
  background-color : #000;
  color : #fff;
  padding : 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sentence">LOREM IPSUM DOLOR</div>
0
répondu Lucas Tesseron 2016-02-27 14:56:16

Qu'est-ce qui ne va pas avec text-align: justify ? Je crois que je me méprends sur votre question.

-1
répondu ClosureCowboy 2010-12-04 18:29:51