【CSS】デザインでテキスト1文字ごとにletter-spacingが違う時

Question

実現したいこと

テキストのletter-spacingが1文字ごとに違う場合どうコーディングしたら良いか

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

デザインにあるテキストのletter-spacingが1文字ごとに違う場合どうしたら効率よくコーディングできるのか

例えば「あいうえおかきくけこ」というテキストがあった場合
「あ」は0.3em
「い」は0.07em
「う」は-0.06em...
といったように1文字ずつ違うletter-spacingが設定されていて複雑になっているデザインをコーディングしなければいけない時に簡単な方法はないでしょうか。

1文字ずつspanで囲んでCSSをあてる方法でやっているのですがものすごい時間がかかってしまいかなりしんどいので何かいい方法はないでしょうか。

該当のソースコード

特になし

試したこと・調べたこと

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

上記の詳細・結果

⓵1文字ずつspanで囲みletter-spacingを設定する
→spanがletter-spacingを無視して横幅を決めてしまうのでletter-spacingで幅を変えた意味がなかった

②1文字ずつspanで囲みletter-spacingを設定し、更にflexで並べる
→l一応うまくいったが改行の時などに不便が生じる。

③丸ごと画像として書き出す
→改行の時に不便が生じる

補足

特になし

Answer 1

カンプがそうなっている、という話であれば、デザイナーさんとコミュニケーションを取るべきかもしれません。

もし、タイポグラフィとして必要な処理というデザイナーの意見であれば、仕方ないのでひとつひとつ設定するか、あるいはラスタライズしてしまった方がいいかもしれません。
もし、それほどこだわりがないということでしたら、font-feature-settings: "palt";などとして自動カーニングで対応してもいいかもしれません。

Answer 2

1文字ずつspanで囲んでCSSをあてる方法でやっている

1文字ずつ違うんですからそうするしかないと思いますが？
なにか自動で判別するロジックがあるならそれをjsやcssで実装すればよいです

spanがletter-spacingを無視して横幅を決めてしまうのでletter-spacingで幅を変えた意味がなかった

のところがいまいち引っ掛かりますがjsで処理してみました

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const spacing={
    "あ":"0.3em",
    "い":"0.07em",
    "う":"-0.06em",
  }
  const flg=content.textContent.split("")
            .map(x=>Object.assign(document.createElement('span'),{textContent:x}))
            .map(x=>(x.style.letterSpacing=(spacing[x.textContent]??null)?spacing[x.textContent]:null,x))
            .reduce((x,y)=>(x.append(y),x),new DocumentFragment());
  content.textContent="";
  content.appendChild(flg);
});
</script>
<div id="content">あいうえおかきくけこ</div>