回答編集履歴
2
JSコード例の追記
test
CHANGED
|
@@ -22,4 +22,42 @@
|
|
|
22
22
|
日本語もローマ字の幅に差がなければこれでいいですが、差が大きいと中央からずれます。
|
|
23
23
|
それを調整するにはCSSだけでは難しそうなので、JSを使って日本語とローマ字の要素の幅(width)もtransformでの設定に合わせて変更することになりそうです。
|
|
24
24
|
|
|
25
|
+
コード例
|
|
26
|
+
```JS
|
|
27
|
+
function adjustBlankWidth() {
|
|
28
|
+
const jpElements = document.querySelectorAll("#stationNameJpDisplay");
|
|
29
|
+
const enElements = document.querySelectorAll("#stationNameEnDisplay");
|
|
25
30
|
|
|
31
|
+
jpElements.forEach((jp) => {
|
|
32
|
+
const textContent = jp.textContent.replace(/\s/g, ''); // 空白を除いた文字数を取得
|
|
33
|
+
|
|
34
|
+
// scaleとtext-indentの設定
|
|
35
|
+
if (textContent.length === 3) {
|
|
36
|
+
jp.style.transform = 'scale(1.0, 1)'; // 3文字の場合
|
|
37
|
+
jp.style.letterSpacing = '0.0em'; // 3文字のときのletter-spacing
|
|
38
|
+
} else if (textContent.length === 4) {
|
|
39
|
+
jp.style.transform = 'scale(1.2, 1)'; // 4文字の場合
|
|
40
|
+
jp.style.letterSpacing = '0.0em'; // 4文字のときのletter-spacing
|
|
41
|
+
jp.style.width = jp.clientWidth * 1.2 + "px";
|
|
42
|
+
} else if (textContent.length === 5) {
|
|
43
|
+
jp.style.transform = 'scale(1.05, 1)'; // 5文字の場合
|
|
44
|
+
jp.style.letterSpacing = '0.0em'; // 5文字のときのletter-spacing
|
|
45
|
+
jp.style.width = jp.clientWidth * 1.05 + "px";
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
enElements.forEach((en) => {
|
|
50
|
+
var matrix = window.getComputedStyle(en).transform;
|
|
51
|
+
var matrixArray = matrix.replace("matrix(", "").split(",");
|
|
52
|
+
var scale = parseFloat(matrixArray[0]);
|
|
53
|
+
en.style.width = en.clientWidth * scale + "px";
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
adjustBlankWidth();
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
なお、CSSは幅を変更することでレイアウトが変わるので、日本語もローマ字も transform-origin: left; になります。
|
|
60
|
+
|
|
61
|
+
[CodePenサンプル](https://codepen.io/hatena19/pen/RNbxWXY?editors=1111)
|
|
62
|
+
|
|
63
|
+
|
1
コードの間違い修正
test
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
```CSS
|
|
14
14
|
#stationNameJpDisplay {
|
|
15
|
-
transform-origin:
|
|
15
|
+
transform-origin: right;
|
|
16
16
|
}
|
|
17
17
|
#stationNameEnDisplay {
|
|
18
18
|
transform-origin: left;
|