実現したいこと

<span id="stationNameJpDisplay">ふくさき</span>
<span class="blank"></span> 
<span id="stationNameEnDisplay">Fukusaki</span>の
<span class="blank"></span> の幅を一定に保持したいです。

発生している問題・分からないこと

stationNameJpDisplayとstationNameEnDisplayと入力している箇所が、入力の文字の書式設定によって、<span class="blank"></span>の幅が変わります。
transformや、letter-spacing、のサイズや文字数が大になればそれに応じてblankの幅は小になってしまいます。
改善策はございませんか。

該当のソースコード

css
1/* フォントのインポート */
2@import url('https://fonts.cdnfonts.com/css/frutiger-lt-pro');
3
4@font-face {
5    font-family: 'Monogo';
6    src: url('path/to/GenEi-Mono-Gothic.woff2') format('woff2'),
7         url('path/to/GenEi-Mono-Gothic.woff') format('woff'),
8         url('path/to/GenEi-Mono-Gothic.ttf') format('truetype');
9}
10
11/* 基本スタイル */
12.stationBoard {
13    display: grid;
14    grid-template-columns: auto 1fr auto;
15    grid-template-rows: auto auto auto auto auto;
16    text-align: center;
17    margin: 15pt;
18    border: none;
19    font-family: 'Frutiger LT Pro', 'GenEi Mono Gothic', sans-serif;
20}
21
22.stationBoard > div {
23    padding: 7.5pt;
24}
25
26/* 駅名の大きな漢字部分 */
27#stationNameDisplay {
28    grid-column: 1 / span 3;
29    font-size: 64pt;
30    font-weight: bold;
31    transform: scale(1.1, 1);
32}
33
34/* 駅名のかな・ローマ字部分の親要素 */
35#stationNameJpEn {
36    grid-column: 1 / span 3; /* グリッドの列を指定 */
37    display: flex; /* Flexboxを使用 */
38    justify-content: center; /* 中央揃え */
39    align-items: center; /* 縦方向の中央揃え */
40    font-weight: bold;
41    width: 98%; /* 幅を100%に設定 */
42}
43/* 駅名のかな部分 */
44#stationNameJpDisplay {
45    font-size: 22pt;
46}
47
48/* 駅名のローマ字部分 */
49#stationNameEnDisplay {
50    font-size: 27pt;
51    transform: scale(1.2, 1); /* スケーリングを適用 */
52    letter-spacing:0.0em;
53}
54
55/* 空白部分の調整 */
56.blank {
57    width:30pt; /* 固定幅 */
58}

javascript
1function adjustBlankWidth() {
2    const jpElements = document.querySelectorAll('#stationNameJpDisplay');
3    const stationNameDisplays = document.querySelectorAll('#stationNameDisplay');
4
5    jpElements.forEach(jp => {
6    const textContent = jp.textContent.replace(/\s/g, ''); // 空白を除いた文字数を取得
7
8    // scaleとtext-indentの設定
9    if (textContent.length === 3) {
10        jp.style.transform = 'scale(1.0, 1)'; // 3文字の場合
11        jp.style.letterSpacing = '0.0em'; // 3文字のときのletter-spacing
12    } else if (textContent.length === 4) {
13        jp.style.transform = 'scale(1.2, 1)'; // 4文字の場合
14        jp.style.letterSpacing = '0.0em'; // 4文字のときのletter-spacing
15    } else if (textContent.length === 5) {
16        jp.style.transform = 'scale(1.05, 1)'; // 5文字の場合
17        jp.style.letterSpacing = '0.0em'; // 5文字のときのletter-spacing
18    }
19});
20
21    // stationNameDisplayの文字数に応じたletter-spacingとtext-indentの設定
22    stationNameDisplays.forEach(display => {
23        const textLength = display.textContent.length;
24        if (textLength === 3) {
25            display.style.letterSpacing = '0.4em';
26            display.style.textIndent = '0.4em'; // 3文字のとき
27        } else {
28            display.style.letterSpacing = '1.0em'; // デフォルト
29            display.style.textIndent = '1.0em';  // デフォルト
30        }
31    });
32}
33adjustBlankWidth();