CSS 禁則処理シミュレーターを作った話。

投稿日：2020年12月28日

アイキャッチはInDesignの禁則処理セットのウィンドウですが、今回InDesignは関係ありません。

2020.02.23

Webで記事を読んでいると行末が揃ってなかったり、句読点が行頭にあったりと美しくない文字組版を多々みかけます。以前DTPの仕事を...

上記の記事はCSS 禁則処理の検索クエリで比較的上位に表示され、PV数も安定しています。
ご閲覧いただき、誠にありがとうございます。

実際に入力した文字を、禁則処理でシミュレートしたい機会が多々ありました。
必要性を感じたので、作ってみました。
何かのお役に立てれば幸いです。

以下のテキストエリアに任意の文字を入力し、各プロパティボタンをクリックすると、値が付与されます。
text-alignは最初からleftを設定してあります。
スライダーを左右に動かすと、テキストエリアが拡縮します。
クリアボタンをクリックするとプロパティと値が削除されます。
黒いウィンドウに現在のプロパティと値が表示され、コピーをクリックするとコピーされます。
検証ツールでelementsを確認すると、動的に変化するのが確認できます。
※テキストエリア内にペーストした禁則文字を、CSSで着色しようとしましたが、うまくできませんでした。。。
残念。。。

text-align

left

justify

line-break

auto

loose

normal

strict

クリア

word-break

normal

break-all

keep-all

break-word

クリア

overflow-wrap

normal

anywhere

break-word

クリア

element.style {

text-align : left ;

line-break

word-break

overflow-wrap

}

コピー

各プロパティの説明はこちらの記事をご参照ください。

WordPress用にカスタマイズする前のHTML、CSS、JavaScriptを掲載しておきます。

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テスト</title>
    <script> src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <input id="input1" type="range" value="584.625" min="1" max="584.625" step="1"
        oninput="document.getElementById('output1').value=this.value" style="width:584.625px;">

    <output> id="output1" hidden>584</output>
    <form action="">
        <textarea> name="prohibition" id="textarea01" cols="30" rows="3"
            style="width:584.625px; text-align:left;">吾輩は猫である。ニャーニャーと、泣いていた・・・。人間という！一番〜獰悪だった？等々</textarea>
    </form>
    <div id="contentsWrap">
        <div id="textPropWrap">
            <div class="btnWrap">
                <p class=""><strong>text-align</strong></p>
                <div>
                    <p> class="button taLeft">left</p>
                    <p> class="button taJustify">justify</p>
                </div>
            </div>
        
            <div class="btnWrap">
                <p class=""><strong>line-break</strong></p>
                <div>
                    <p> class="button lbAuto">auto</p>
                    <p> class="button lbLoose">loose</p>
                    <p> class="button lbNormal">normal</p>
                    <p> class="button lbStrikt">strict</p>
                    <p> class="button clearLb clearBtn">クリア</p>
                </div>
            </div>
    
            <div class="btnWrap">
                <p class=""><strong>word-break</strong></p>
                <div>
                    <p> class="button wbNormal">normal</p>
                    <p> class="button wbBreakAll">break-all</p>
                    <p> class="button wbKeepAll">keep-all</p>
                    <p> class="button wbBreakWord">break-word</p>
                    <p> class="button clearWb clearBtn">クリア</p>
                </div>
            </div>
    
            <div class="btnWrap">
                <p class=""><strong>overflow-wrap</strong></p>
                <div>
                    <p> class="button ofwNormal">normal</p>
                    <p> class="button ofwAnywhere">anywhere</p>
                    <p> class="button ofwBreakWord">break-word</p>
                    <p> class="button clearOw clearBtn">クリア</p>
                </div>
            </div>
        </div>
    
        <div id="elmStyleWrap">
            <div class="elmStyle">
                <p>element.style {</p>
                    <p class="taProp">text-align<span> class="taPropVal"> : left ;</span></p>
                    <p class="lbProp">line-break<span> class="lbPropVal"></span></p>
                    <p class="wbProp">word-break<span> class="wbPropVal"></span></p>
                    <p class="owProp">overflow-wrap<span> class="owPropVal"></span></p>
                    <p>}</p>
            </div>
            <div><p> class="button copyBtn">コピー</p></div>
        </div>
    </div>
    <script> src="js/index.js"></script>
</body>

</html>

CSS

#textPropWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#textarea01 {
    resize: vertical;
    height: 60px;
}

.button {
    background-color: #ccc;
    width: 7em;
    text-align: center;
    padding: 0.125em;
    border-radius: 7px;
    box-shadow: 2px 2px 2px #aaa;
    font-size: 0.75em;
    cursor: pointer;
    transition: .3s;
}

.button:hover {
    background-color: #ddd;
    transition: .3s;
}

.btnWrap {
    margin: .5em 0;
}

.btnWrap div {
    display: flex;
    flex-wrap: wrap;
}

.btnWrap p {
    margin: 0;
}

.btnWrap div p {
    margin: 0.25em;
}

.clearBtn {
    background-color: #ca8383;
}

.clearBtn:hover {
    background-color: #e1b8b8;
}

.elmStyle {
    background-color: rgb(36, 36, 36);
    font-size: .9em;
    color: #fff;
    width: 260px;
    padding: .5em 1em;
}

.elmStyle p {
    margin: 0;
}

.elmStyle p.taProp,
.elmStyle p.lbProp,
.elmStyle p.wbProp,
.elmStyle p.owProp {
    color: rgb(54, 212, 199);
    margin-left: 1.5em;
}

.elmStyle p.lbProp,
.elmStyle p.wbProp,
.elmStyle p.owProp {
    display: none;
}

.elmStyle span {
    color: #fff;
}

#elmStyleWrap {
    margin-top: 1em;
}

.copyBtn {
    margin: .5em 0;
}

JavaScript

//////////////////////////////////
// ▼▼▼ スライダーとtxtAreaの連動関数
let rangeSlide = (inputVal, outputVal, targetProp) => {
    const contentWidth = $('#input1').width(); //スライダーの幅
    $(inputVal).attr({
        value: contentWidth,
        min: "1",
        max: 584,
        step: "1",
        style: 'width: ' + contentWidth + 'px'
    });

    $(outputVal).val(contentWidth);

    $('#textPropWrap').css('width', contentWidth + 'px');
    $('.btnWrap div').css('width', contentWidth / 2 + 'px');

    $(inputVal).on('input', function () {
        const inputWidth = $(outputVal).val();
        $(targetProp).css('width', inputWidth + "px");
        $(inputVal).attr({
            max: contentWidth
        });
    });
}
rangeSlide("#input1", "#output1", "#textarea01");

//////////////////////////////////
// ▼▼▼ 文字組みプロパティ付与関数
let txtAlign = (targetProp, prop, propVal, propTxtVal) => {
    $(targetProp).click(function () {
        $('#textarea01').css(prop, propVal);
        $(propTxtVal).html(' :  ' + propVal + ' ;');
        $(propTxtVal).parent().css('display', 'block');
    });
}

// ▼▼▼ text-align
txtAlign('.taLeft', 'textAlign', 'left', '.taPropVal');
txtAlign('.taJustify', 'textAlign', 'justify', '.taPropVal');

// ▼▼▼ line-break
txtAlign('.lbAuto', 'lineBreak', 'auto', '.lbPropVal');
txtAlign('.lbLoose', 'lineBreak', 'loose', '.lbPropVal');
txtAlign('.lbNormal', 'lineBreak', 'normal', '.lbPropVal');
txtAlign('.lbStrikt', 'lineBreak', 'strict', '.lbPropVal');

// ▼▼▼ word-break
txtAlign('.wbNormal', 'wordBreak', 'normal', '.wbPropVal');
txtAlign('.wbBreakAll', 'wordBreak', 'break-all', '.wbPropVal');
txtAlign('.wbKeepAll', 'wordBreak', 'keep-all', '.wbPropVal');
txtAlign('.wbBreakWord', 'wordBreak', 'break-word', '.wbPropVal');

// ▼▼▼ overflow-wrap
txtAlign('.ofwNormal', 'overflowWrap', 'normal', '.owPropVal');
txtAlign('.ofwAnywhere', 'overflowWrap', 'anywhere', '.owPropVal');
txtAlign('.ofwBreakWord', 'overflowWrap', 'break-word', '.owPropVal');

//////////////////////////////////
// ▼▼▼ 各クリアボタンの関数
let clearPropBtn = (targetBtn, targetProp, propTxtVal) => {
    $(targetBtn).click(function () {
        $('#textarea01').css(targetProp, '');
        $(propTxtVal).html('');
        $(propTxtVal).parent().css('display', 'none');
    });
}

clearPropBtn('.clearLb', 'line-break', '.lbPropVal'); //line-breakを解除
clearPropBtn('.clearWb', 'word-break', '.wbPropVal'); //word-breakを解除
clearPropBtn('.clearOw', 'overflow-wrap', '.owPropVal'); //overflow-wrapを解除

//////////////////////////////////
// ▼▼▼ コピー押下でプロパティをクリップボードに送る
$('.copyBtn').click(function () {
    const txtVal = $('.elmStyle p:visible').text();
    const repTxt = txtVal.replace(/ /g, '');
    // ▼クリップボードに送る
    const txtArea = $('');
    txtArea.text(repTxt);
    $(this).append(txtArea);
    txtArea.select();
    document.execCommand('copy');
    txtArea.remove();
});

まとめ

長年、DTP、文字組版の仕事をしていたので、Webサイトで文字組みの美しくない体裁に遭遇すると気になることが多々あります。
気になる目を養いつつ、自分の作るWebサイトの体裁改善に励みたいと思います。
なお、掲載しているソースコードはご自由にお使いいただいても構いませんが、何かあっても責任は追いかねるのでご了承ください。

最後まで読んでくださりありがとうございました。

onebitious's BLOG

2020.02.19