実現したいこと

transformscaleで文字を長体にしたり平体にしても、
平仮名とローマ字の間隔は変えたくございません。

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

下図のように、長体や平体にすると、thisStationJa11と"thisStationEn11の間のblank2の間隔が必ず
それに応じて幅が広くなったり狭まったりします。
下の図のようになります。

以下がそのhtmlになります。

<div id="stationBoard" class="stationBoard">
    <div id="stationNameDisplay" style="width: 100%;"></div>
    <div style="width: 100%;"><span id="stationNameHiraganaDisplay"></span> <span id="stationNameRomanDisplay"></span></div>
    <div id="lineColorDisplay" style="height: 20px; width: 100%;"><!--高さ指定は必須、かつ数字は適当なので要調整-->
        <div class="center-fix"><div class="thisStationZh">谷谷</div></div>
        <div class="center-fix2">
            <font class="thisStationJa">TTT</font><font class="blank1">&emsp;</font>
            <font class="thisStationEn">TTTTTT</font>
        </div>
    </div>
</div>
<br />
<div id="stationBoard" class="stationBoard2">
    <div id="stationNameDisplay" style="width: 100%;"></div>
    <div style="width: 100%;"><span id="stationNameHiraganaDisplay"></span> <span id="stationNameRomanDisplay"></span></div>
    <div id="lineColorDisplay" style="height: 20px; width: 100%;"><!--高さ指定は必須、かつ数字は適当なので要調整-->
        <div class="center-fix11"><div class="thisStationZh11">谷谷</div></div>
        <div class="center-fix12">
            <font class="thisStationJa11">TTT</font><font class="blank2">&emsp;</font>
            <font class="thisStationEn11">TTTTT</font>
        </div>
    </div>
</div>
<style>
.stationBoard2{
position:relative;top:100pt;
font-family:"Frutiger LT Pro","源暎モノゴ", sans-serif;
}
.center-fix{
display: flex;
align-items: center;
justify-content: center;
font-weight:bold;
transform: scale(1.2,1);
}
.center-fix2{
display:flex;
justify-content: center;
font-weight:bold;
transform: scale(1.2, 1);
}
.center-fix3{
display:flex;
justify-content: center;
}
.thisStationZh{
font-size:60pt;
letter-spacing: 1em;
margin-left:1em;
}
.thisStationJa{
font-size:20pt;
letter-spacing: 0.3em;
margin-left:-0.02em;
}
.blank1{
}
.thisStationEn{
font-size:22pt;
}
</style>
<style>
.stationBoard2{
font-family:"Frutiger LT Pro","源暎モノゴ", sans-serif;
}
.center-fix11{
display: flex;
align-items: center;
justify-content: center;
font-weight:bold;
transform: scale(1.2,1);
}
.center-fix12{
display:flex;
justify-content: center;
font-weight:bold
}
.thisStationZh11{
font-size:60pt;
letter-spacing: 1em;
margin-left:1em;
}
.thisStationJa11{
font-size:20pt;
}
.blank2{
}
.thisStationEn11{
font-size:22pt;
}
</style>
<br />

該当のソースコード

特になし

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

チャットgptに問いかけても幅が変わりました。
もうお手上げです。

補足

特になし

行動規範の内容に同意します

回答1件

上位要素の「.center-fix2」に「transform: scale」が設定されているからでは？
scaleで左右に伸ばすと間のblank部分に干渉して伸びるのでいずれにしろきれいに間をあけるのは厳しいですね
あえてやるならgapを調整するくらいでしょうか

もしくは該当部分に逆のスケールを当てるとか

css
1.center-fix2 .blank1{
2transform: scale(1/1.2, 1);
3}

追記

失礼しましたscaleに式で値を設定するにはcalcが必要ですね
以下確認してみください
ブランクの幅は統一されますが見た目上thisStationJaのTの右側に余白が有るので実際の幅は上の方が広くなります。
これを揃えたいのであればscaleでの引き伸ばしはやめたほうがいいでしょう

html
1<div id="stationBoard" class="stationBoard">
2    <div id="stationNameDisplay" style="width: 100%;"></div>
3    <div style="width: 100%;"><span id="stationNameHiraganaDisplay"></span> <span id="stationNameRomanDisplay"></span></div>
4    <div id="lineColorDisplay" style="height: 20px; width: 100%;"><!--高さ指定は必須、かつ数字は適当なので要調整-->
5        <div class="center-fix"><div class="thisStationZh">谷谷</div></div>
6        <div class="center-fix2">
7            <font class="thisStationJa">TTT</font><font class="blank1">&emsp;</font>
8            <font class="thisStationEn">TTTTTT</font>
9        </div>
10    </div>
11</div>
12<br />
13<div id="stationBoard" class="stationBoard2">
14    <div id="stationNameDisplay" style="width: 100%;"></div>
15    <div style="width: 100%;"><span id="stationNameHiraganaDisplay"></span> <span id="stationNameRomanDisplay"></span></div>
16    <div id="lineColorDisplay" style="height: 20px; width: 100%;"><!--高さ指定は必須、かつ数字は適当なので要調整-->
17        <div class="center-fix11"><div class="thisStationZh11">谷谷</div></div>
18        <div class="center-fix12">
19            <font class="thisStationJa11">TTT</font><font class="blank2">&emsp;</font>
20            <font class="thisStationEn11">TTTTT</font>
21        </div>
22    </div>
23</div>
24<script>
25//確認用
26window.addEventListener('DOMContentLoaded', function(e){
27  const w=[
28    document.querySelector('.blank1').getBoundingClientRect().width,
29    document.querySelector('.blank2').getBoundingClientRect().width,
30    ];
31  console.log(w);
32});
33</script>
34<style>
35/* ここから */
36.blank1,.blank2{
37  background-Color:yellow;
38}
39.blank1{
40transform: scale(calc(1/1.2),1);
41}
42/* ここまで追加 */
43.stationBoard2{
44position:relative;top:100pt;
45font-family:"Frutiger LT Pro","源暎モノゴ", sans-serif;
46}
47.center-fix{
48display: flex;
49align-items: center;
50justify-content: center;
51font-weight:bold;
52transform: scale(1.2,1);
53}
54.center-fix2{
55display:flex;
56justify-content: center;
57font-weight:bold;
58transform: scale(1.2, 1);
59}
60.center-fix3{
61display:flex;
62justify-content: center;
63}
64.thisStationZh{
65font-size:60pt;
66letter-spacing: 1em;
67margin-left:1em;
68}
69.thisStationJa{
70font-size:20pt;
71letter-spacing: 0.3em;
72margin-left:-0.02em;
73}
74.blank1{
75}
76.thisStationEn{
77font-size:22pt;
78}
79</style>
80<style>
81.stationBoard2{
82font-family:"Frutiger LT Pro","源暎モノゴ", sans-serif;
83}
84.center-fix11{
85display: flex;
86align-items: center;
87justify-content: center;
88font-weight:bold;
89transform: scale(1.2,1);
90}
91.center-fix12{
92display:flex;
93justify-content: center;
94font-weight:bold
95}
96.thisStationZh11{
97font-size:60pt;
98letter-spacing: 1em;
99margin-left:1em;
100}
101.thisStationJa11{
102font-size:20pt;
103}
104.blank2{
105}
106.thisStationEn11{
107font-size:22pt;
108}
109</style>
110<br />

投稿2024/08/16 09:04

編集2024/08/17 06:28

yambejp

総合スコア116468

sembokulove

2024/08/16 09:24

回答ありがとうございます。試してみましたが解決できませんでした。 thisStationJa11とthisStationEnにletter-spacingを設定しましたが、逆効果です。 cssも無能ですね。この場合どの辺りに原因がありそうでしょうか？

sembokulove

2024/08/16 10:40

回答ありがとうございます。試してみましたが解決できませんでした。無理ですね。例えば、thisStationJa11にletter-spacing:0.1em;をかけた場合、通常は、text-aliginで0.1emないしmargin-rightで0.1emをかけるところまではできます。しかし実際は、blankがthisStationJa11のletter-spacing:0.1emの状態と0の状態が合致するのは、その反対のmargin-right:-0.1emでも、thisStationJa11にかけている、margin-right:0.1emと合算した、 -0.2emでもなく、実際は、-0.5emでした。この場合どの辺りに原因がありそうでしょうか？

sembokulove

2024/08/18 01:48

回答ありがとうございます。試してみましたが解決できませんでした。この場合どの辺りに原因がありそうでしょうか？そんなにtransform scaleを悪者扱いするなら、 transform scale以外の長体平体の設定の方法を答えてください!!ヽ(`Д´)ﾉﾌﾟﾝﾌﾟﾝ

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

transformscaleで文字を長体や平体にしても文字間隔を変えたくないです。

実現したいこと

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

該当のソースコード

試したこと・調べたこと

上記の詳細・結果

補足

追記

関連した質問