回答編集履歴
1
調整
test
CHANGED
|
@@ -1,4 +1,26 @@
|
|
|
1
|
-
|
|
1
|
+
> 1文字ずつspanで囲んでCSSをあてる方法でやっている
|
|
2
2
|
|
|
3
3
|
1文字ずつ違うんですからそうするしかないと思いますが？
|
|
4
4
|
なにか自動で判別するロジックがあるならそれをjsやcssで実装すればよいです
|
|
5
|
+
|
|
6
|
+
> spanがletter-spacingを無視して横幅を決めてしまうのでletter-spacingで幅を変えた意味がなかった
|
|
7
|
+
|
|
8
|
+
のところがいまいち引っ掛かりますがjsで処理してみました
|
|
9
|
+
```html
|
|
10
|
+
<script>
|
|
11
|
+
window.addEventListener('DOMContentLoaded', ()=>{
|
|
12
|
+
const spacing={
|
|
13
|
+
"あ":"0.3em",
|
|
14
|
+
"い":"0.07em",
|
|
15
|
+
"う":"-0.06em",
|
|
16
|
+
}
|
|
17
|
+
const flg=content.textContent.split("")
|
|
18
|
+
.map(x=>Object.assign(document.createElement('span'),{textContent:x}))
|
|
19
|
+
.map(x=>(x.style.letterSpacing=(spacing[x.textContent]??null)?spacing[x.textContent]:null,x))
|
|
20
|
+
.reduce((x,y)=>(x.append(y),x),new DocumentFragment());
|
|
21
|
+
content.textContent="";
|
|
22
|
+
content.appendChild(flg);
|
|
23
|
+
});
|
|
24
|
+
</script>
|
|
25
|
+
<div id="content">あいうえおかきくけこ</div>
|
|
26
|
+
```
|