Q&A
JavaScript を使うしかないと思います。
https://coliss.com/articles/build-websites/operation/javascript/resizes-text-to-fit-parent-container.html
やりたいこと
- 青枠の領域は動的に変化する
- 青枠はどんな形式でサイズを指定されるかわからない(20vwだったり100pxだったりする)
- その青枠のなかの文字を、青枠内で最大になるようにしたい
JavaScriptを使ったトリッキーな方法では長期のメンテが難しくなったり、変則的なレイアウトなどで動かなくなりがちなので、できればCSSだけで行える正攻法な手段があれば知りたいです。
理想
ブロックの縦幅が 20vw なのでそれを font-size に指定すると上の画像のようになるのだけど、縦幅はわからないという前提なので使えません
font-size に親の height を指定する、といった記述ができればいいのだけど。
現状
該当のソースコード
html
1<html> 2 <head> 3 <style> 4 .box1 { 5 width: 20vw; 6 height: 20vw; /* 仮で20vwとしているが 100px とする場合もある */ 7 8 border: 1px solid blue; 9 text-align: center; 10 line-height: 100%; 11 12 /* 高さが 20vw と知っていればフォントにも同じサイズを指定するとだいたい合うがわからない場合にどうすればよいか */ 13 /* font-size: 20vw; */ 14 } 15 </style> 16 </head> 17 <body> 18 <div class="box1">A</div> 19 </body> 20</html>
試したこと
- font-size に 100% を指定 → ブロックの縦幅ではなく 1em を指定したのと同じ
- font-size に -webkit-fill-available を指定 → 変化なし
- font-size: fit-content(100%) → 変化なし。そもそも fit-content は width とかに指定するもの
- 画像にする → 下のようにすると領域を埋めてくれるが、フォントで行いたい
css
1background-position: center; 2background-size: cover; 3background-repeat: no-repeat; 4background-image: url("path/to/A.png");
- SVGにする → 下のようにすると領域を埋めてくれるが、(文字すべてのSVGを用意するのが大変なので)、フォントで行いたい
html
1<html> 2 <head> 3 <style> 4 .box1 { 5 width: 20vw; 6 height: 20vw; 7 border: 1px solid blue; 8 } 9 </style> 10 </head> 11 <body> 12 <div class="box1"> 13 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1240.000000 1280.000000" preserveAspectRatio="xMidYMid meet"> 14 <g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" stroke="none"> 15 <path d="M5736 12132 c-186 -367 -803 -1578 -1371 -2692 -568 -1114 -1457 -2857 -1975 -3875 -519 -1017 -1269 -2489 -1667 -3269 l-723 -1419 0 -98 c0 -84 2 -98 18 -103 9 -3 235 -54 502 -115 267 -60 863 -196 1325 -301 462 -105 908 -207 992 -226 99 -22 178 -34 225 -34 l73 0 529 1265 529 1265 1942 0 1942 0 538 -1122 c296 -618 569 -1187 606 -1265 l68 -141 38 8 c34 8 2181 475 2823 614 l245 53 3 99 3 100 -299 584 c-165 322 -573 1120 -907 1775 -334 655 -870 1703 -1190 2330 -783 1532 -2116 4142 -2832 5545 -322 630 -648 1268 -725 1418 l-139 272 -117 0 -117 -1 -339 -667z m794 -6012 c216 -476 395 -871 397 -877 4 -10 -160 -13 -801 -13 -443 0 -806 4 -806 8 0 4 23 59 51 122 28 63 201 457 386 875 184 418 340 769 345 779 10 19 11 18 23 -5 7 -13 189 -413 405 -889z"/> 16 </g> 17 </svg> 18 </div> 19 </body> 20</html>
- JavaScript の fitty を使ってみる → 挙動がおかしい＆不安定
html
1<html> 2 <head> 3 <script src="/tmp/fitty.min.js"></script> 4 <script> 5 document.addEventListener('DOMContentLoaded', () => fitty(".text")) 6 </script> 7 <style> 8 body { 9 line-height: 100%; 10 } 11 .box1 { 12 width: 20vw; 13 height: 20vw; 14 border: 1px solid blue; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="box1"><span class="text">A</span></div> 20 </body> 21</html>
GitHub では issue が溜っていてあまりメンテされていない様子でした
ブラウザ
Google Chrome を利用しています
質問の編集拝読。
JavaScriptを使うこと自体には抵抗がない、という理解でいいですか？
助言ありがとうございます
紹介していただいたライブラリを試したところ、使い方がおかしいのか、どうも挙動が怪しくて困っています
回答1件
0
ご希望に合うかどうかわかりませんが。
js
1let target = document.querySelector('.box1'); 2target.style.fontSize = getComputedStyle(target).height;
JavaScript ではなくて、置換要素を使う方法でやってみました。
html
1<object type="text/html" class="box1" 2 data="data:text/html,<html><style>*{margin:0}body{font-size:100vh;line-height:1;overflow:hidden}</style><body>A</body></html>" 3> 4</object>
え？ もっとトリッキーだからダメ？
ﾃﾞｽﾖﾈｰ
投稿2020/11/19 07:32
編集2020/11/19 08:40総合スコア36960
ああ、JavaScriptではダメなのですね。
わかりました。では、方法はないと思います。
最近のCSSは fit-content, max-content, object-fit のような領域に関係する便利機能が増えてきているようなので、もしかしたら font も同様のことができるようになっているのではないかと考えて質問させていただきました
今回は JavaScript を使うつもりはないのですが、別の機会にどうしても必要になったときは、fitty ライブラリではなく、提示していただいた方法でやろうと思います
追記しました。
あなたの回答
tips
プレビュー
