ボタン「テキスト」

アイコンのみのボタンにこのテキスト \u0026ZeroWidthSpace; が表示されるのはなぜですか?

私のボタンのみのアイコンのスタイルを崩すので、どのような目的があるのか気になります :skull_and_crossbones:

「いいね!」 3

このPRで、pmusarajがその理由を説明しています。

これにより、アプリ全体でテキスト入力、ドロップダウン、ボタンの一貫したサイズ設定が追加されます。これらの要素はフォームで一緒に使用されることが多く、計算された高さが異なると多くのレイアウトの問題が発生するため、これは重要です。

関連コード:

「いいね!」 1

ZeroWidthSpace を使用せずに、同じ効果を達成するためのより堅牢な方法があるようです。

「いいね!」 1

おっしゃる通りかもしれません!2021年のPRです。2024年以降の一貫性を確保するための現代的な方法があるかもしれません。

「いいね!」 2

はい、以前にも検討しました(そしておそらく今後も検討するでしょう)が、残念ながらすべてのボタンに最小の高さを追加するような簡単なことでも、既存のテーマに大きな影響を与えてしまいます。

「いいね!」 3

最小の高さはなぜですか? ボタンにドロップダウン/入力と同じサイズのベースパディング/フォント(行の高さを含む)を付けることはできますか?

「いいね!」 1

フォントによって行の高さは異なるため、デフォルトで何かを行うと、テーマが異なるフォントに変更された場合にすぐに不整合な高さが生じる可能性があります。

ゼロ幅スペースは、行の高さやフォントが変更されても、テキストのないボタンがテキストのあるボタンと同様の動作をすることを保証します(つまり、ゼロ幅文字の行の高さは、テキストのあるボタンと同様にボタンの高さに影響します)。

「いいね!」 3

要素全体でフォントを統一すれば、同じ行高が利用され、フォントの行高の違いを防ぐことができるのではないでしょうか?

「いいね!」 1

いいえ、テキストのないボタンは行の高さの影響を受けず、テキストのあるボタンは影響を受けるため、テキストのあるボタンとないボタンの間で一貫性がなくなります。

アイコンの高さはフォントの行の高さに連動しないようにできますか?フォントの詳細/トークンを入力として受け取り、行の高さをアイコンの高さに適用する@functionを想像しています。

「いいね!」 1

これです。現在の行の高さは、lh という CSS 単位で、モダンブラウザでは広くサポートされているため、要素に行の高さを適用することは非常に簡単になりました。

もちろん、既存のテーマを壊さずに変更を加えることの複雑さはわかりませんが。

「いいね!」 3