[PR]

FlexboxとJavaScriptで、異なる文字数の行の幅を自動で一律にそろえる

2019.04.28

Result

text-align: justify;が使えれば楽だけどそうもいかないのでJavaScriptで揃える、というのはかなり昔からある方法ですが、最近はflexboxが普通に使えるようになったので、spanで文字を囲ってdisplay:flex;で揃えれられるし、いろいろ応用も効きそうですね

他ライブラリに依存せず、バニラなコードとなっています

JavaScript

var lines = document.querySelectorAll(".text-line");var appendages = document.querySelectorAll(".append");// 各文字をspan要素で囲うvar wrapCharacters = function(lines) {  return lines.forEach(function(line) {    var characters = line.innerHTML.split("");    var wrappedCharacters = characters      .map(function(character) {        if (character === " ") {          return '<span class="text-line">&nbsp;</span>';        }        return '<span class="text-line">' + character + "</span>";      })      .join("");    return (line.innerHTML = wrappedCharacters);  });};// フォントサイズの設定var useSiblingFontSize = function(elem) {  elem.style.fontSize = elem.previousSibling.style.fontSize;};// 行の長さを測定し、長さに応じてフォントサイズ調整var setFontSize = function(elems) {  return elems.forEach(function(elem) {    if (!elem.classList.contains("append")) {      return (elem.style.fontSize = 50 / elem.innerHTML.length + "vw");    }    return useSiblingFontSize(elem);  });};var formatTextBlocks = function() {  setFontSize(lines);  setFontSize(appendages);  wrapCharacters(lines);};formatTextBlocks();

css

.text-block {  display: grid;  grid-template-columns: max-content 1fr;  margin: auto;  text-transform: uppercase;}.text-line,.text-block cite {  display: flex;  grid-column: 1;  justify-content: space-between;}.text-block .append {  align-self: end;  grid-column: 2;}

html

<blockquote class="text-block"><span class="text-line">東京 Tokyo</span><span class="text-line">東京とは、日本の関東平野中央部の東京湾に面する世界最大級のメトロポリスであり、日本の事実上の首都</span><span class="text-line">現在、東京には23特別区・26市・5町・8村の基礎自治体がある</span><span class="text-line">関東大震災を経験し、多くの家屋が焼け、東京市では人口の3割強が減少</span><span class="text-line">1868年に江戸から名称変更</span><span class="text-line">戦後には東京は目覚ましい復興を遂げ、人口は増え続け、2019年時点で、東京都で約1300万人まで、またいわゆる「首都圏」（東京圏）では3700万人まで増えた</span><span class="text-line">大久保利通が「東京」と改称することを提案</span></blockquote>