CSSテキストは文字間隔で正当化されます

StackOverflow https://stackoverflow.com/questions/4355009

質問

CSSを使用して、それぞれの列にある文字間隔を使用して単語を自動的に正当化する方法はありますか？

たとえば、「このようなもの」は、まあ、次のように見えます。

"Something like this" would look something like this

私のテキストにそのようなスタイリングを適用するための非抑制的な方法はありますか？純粋なCSSにはこのオプションがないと思います（少なくとも3以前のCSSバージョンでは、CSS3には text-justify プロパティですが、まだ十分にサポートされていません）。そのため、JSソリューションも問題ありません。

役に立ちましたか？

解決

これができるスクリプトです。それはきれいではありませんが、多分あなたはあなたのニーズを満たすためにそれをハッキングすることができます。 （サイズ変更を処理するために更新）

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;
  }
}
#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;
}
<body onload="Justify()">
  <p id="character_justify">
    Something<br/> Like
    <br/> This
  </p>
</body>

他のヒント

CSSのみのソリューションはです text-justify: distribute https://www.w3.org/tr/css-text-3/#text-justify しかし、サポートはまだ非常に貧弱です。

使用した小さな実験 text-align-last: justify 文字の間にスペースを追加します。

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>

私はこれが古いトピックであることを知っていますが、先日これに直面しました。テーブルを使用した適切なソリューションを見つけました。

すべての文字をに入れてください <td> </td> 私はそれが退屈に見えることを知っていますが、もしあなたがこれをしたいなら、それは一言か二言ですよね？または、JSを常に使用して、多すぎる場合はそれを埋めることができます。ただし、これはCSSのみであり、非常に用途の広いソリューションです。

文字間隔を使用して、文字が適切に配布されます。テーブルの幅に応じて、それを使って遊ぶ必要があります。

#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>

こちらの例を参照してください

Crossbrowser Safe、事実上何も違いはありません。ただのCSSです。

私はそれを使用しました 私のウェブサイト 英語とスペイン語です。スペイン語の私の名前の下にある字幕には追加の手紙があり、幅が停止します。上記のテーブルを使用して、同じ幅に自動的に配布されます。手動で間隔を置いて、各言語の条件全体を定義して、それを回避する必要がありました。

この質問のために私が書いたjQueryスニペットを使用した他のアプローチは次のとおりです。 divの幅をフィットするためにテキストをストレッチします :

デモ

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();
    });
});

これも必要だったので、私はあなたがここで見つけることができる簡単なjquery-pluginで提案されたテクニックをバンドルしました： https://github.com/marc-portier/jquery-letterjustify#readme.

コアで同じ手順を使用し、調整するためにいくつかのオプションを追加します。コメント歓迎。

繰り返しますが、私はこれが本当に古いことを知っていますが、なぜそれぞれの文字の間にスペースを置いてから、テキストアライメント：正当化しないのですか？その後、各文字は「単語」と見なされ、それに応じて正当化されます

これを処理する別の方法は、「VW」サイジングユニットを使用することです。このユニットタイプは、フォントサイズのプロパティで使用でき、ウィンドウの幅の割合を表します。

免責事項： それはあなたが探しているものではありませんが、スクリプトを必要としません。テキストサイズを調整しますが、ページの幅にもスケーリングします。

例えば、 

.heading {
  font-size: 4vw;
}

現在のフォントの1つの文字の幅をウィンドウの幅の4％にします。

その後、ウィンドウの幅に基づいてフォントサイズを最小サイズにロックする場合は、メディアクエリを使用できます。

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

ブラウザインスペクターを使用して、フォントサイズのプロパティで再生し、アプリケーションにとって理にかなっているものに値を調整します。

「VW」ユニットは、IE9+、iOS 8.3+、Android 4.4+、およびその他のすべての主流ブラウザーで動作します。メディアクエリを使用して上記のようにこれらのデバイスに適切なサイズを置くことができるため、モバイルサポートについてあまり心配することはありません。

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

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

ビューポートユニットは、コードがほとんどないサイトのさまざまな側面を拡大する強力な方法です。

テーブルのトニーBアプローチからjQueryスクリプトを作成しました。これがjsfiddleです https://jsfiddle.net/7tvuzkg3/7/

このスクリプトは、各charを連続してテーブルを作成します。これは完全な文で機能します。これが完全に最適化されているかどうかはわかりません。

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>

何が悪いのか text-align: justify？私はあなたの質問を誤解しているかもしれないと思います。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top