【ティラノスクリプト】三点リーダー、ダッシュが連続するときに余白を詰めるマクロ

ティラノスクリプトのマクロを組んだので共有しますという記事です。

; ----------------------------------------------------------
/**
 * ２連続ダッシュを無理やりつなげる
*/
@macro name="Dash2"
―
@iscript
    (function () {
        const t = '―';
        const r = '――　';
        const chars = document.querySelectorAll('.char');
        const arr = Array.from(chars);
        arr.filter(str => {
            return str.textContent == t;
        }).map(str => {
            str.textContent = r;
            str.style.letterSpacing = '-3px';
            return str;
        });
    })();
@endscript
@endmacro
; ----------------------------------------------------------
/**
 * ４連続ダッシュを無理やりつなげる
*/
@macro name="Dash4"
―
@iscript
    (function () {
        const t = '―';
        const r = '――――　';
        const chars = document.querySelectorAll('.char');
        const arr = Array.from(chars);
        arr.filter(str => {
            return str.textContent == t;
        }).map(str => {
            str.textContent = r;
            str.style.letterSpacing = '-3px';
            return str;
        });
    })();
@endscript
@endmacro
; ----------------------------------------------------------
/**
 * ２連続三点リーダーを無理やりつなげる
*/
@macro name="Lead2"
…
@iscript
    (function () {
        const t = '…';
        const r = '……';
        const chars = document.querySelectorAll('.char');
        const arr = Array.from(chars);
        arr.filter(str => {
            return str.textContent == t;
        }).map(str => {
            str.textContent = r;
            str.style.letterSpacing = 0;
            return str;
        });
    })();
@endscript
@endmacro
; ----------------------------------------------------------
/**
 * ４連続三点リーダーを無理やりつなげる
*/
@macro name="Lead4"
…
@iscript
    (function () {
        const t = '…';
        const r = '…………';
        const chars = document.querySelectorAll('.char');
        const arr = Array.from(chars);
        arr.filter(str => {
            return str.textContent == t;
        }).map(str => {
            str.textContent = r;
            str.style.letterSpacing = 0;
            return str;
        });
    })();
@endscript
@endmacro

使い方

たとえば次のように書くと

[Dash2]なんてことだ[Lead2]!！[p]
[Lead4]。[p]
[Dash4]よし。[p]

表示は

――なんてことだ……!![p]
…………。[p]
――――よし。[p]

という感じになります。

背景

三点リーダーとダッシュ

三点リーダーやダッシュは２連続で使うのが良しとされることが多い。

ダッシュが連続するときは、倍角ダッシュとか言ったりするとかなんとかで、こだわりを持つ人も少なくないようです。

ティラノスクリプトだとうまくいかない

……が、ティラノスクリプトでは、連続で使うと隙間が空いてしまう。

三点リーダーは１つで使うと３つの点は等間隔ですが、２連続だと隙間が空いて６つの点が等間隔ではなくなってしまいます。
ダッシュはもっと変。一本の長い線になってほしいのに、字間が空くと２本の線になってしまうんです。

それを解消してしよう、ということで組んだのが上記のマクロです。

マクロの仕組み

全部で４つマクロがありますが、

• ダッシュか、三点リーダーか

• ２連続か、４連続か

という２ｘ２になっているだけで、挙動は同じです。ので、２連続ダッシュを例に説明します。

/**
 * ２連続ダッシュを無理やりつなげる
*/
@macro name="Dash2"
― // Point 1
@iscript
    (function () {
        const t = '―';   // Point 2
        const r = '――　';  // Point 3
        const chars = document.querySelectorAll('.char');
        const arr = Array.from(chars);
        arr.filter(str => {
            return str.textContent == t;   // Point 4
        }).map(str => {
            str.textContent = r;
            str.style.letterSpacing = '-3px';  // Point 5
            return str;
        });
    })();
@endscript
@endmacro

ティラノスクリプトというのは、書かれたテキストが１文字ずつ表示されますよね。その１文字は、spanタグで１文字１文字が囲われます。

文字が１文字が１つのspanになる。spanとspanの間でスペースがまず空いてしまうわけです。<span>あ</span><span>い</span>とかね。

ので、とりあえず表示した「―」を「――」という２連続の形に置換します。<span>あい</span>みたいな感じにすると。それが Point 4あたり。

その後、Point 5で、レタースペーシングを調整します。筆者はMacを使っているのでMac上では0pxでも字間は詰まります。が、iPhoneでの動作確認をしたところ、-3pxがちょうどよかったので、-3pxにしています。

実際に使用する際には、メインに据えた環境で動作を見ながらpxを調整してください。

なおダッシュと三点リーダーで、同じデバイスでも少し差がありましたので、ダッシュは-3px、三点リーダーは0という差があります。