タイポグラフィのアラインメントとスケールでUI要素のアイコンの改善

ユーザーインターフェイス要素でアイコンを使用することは役立ちます。要素のラベル付けに加えて、アイコンはユーザーに対するユーザー要素の意図を強化するのに役立ちます。しかし、私は言わなければならない、私はウェブを閲覧している間、少しアイコンの不整合に気づいた。アイコンのアラインメントが正しい場合でも、要素の変更のタイポグラフィスタイルが変更された場合、アイコンはしばしばよく反応しません。

私はいくつかの現実世界の例に注意しました、そして、私はそれらをどのように改善したかについての私の考えを共有したいと思います。これらのテクニックが、他の人がタイポグラフィの変更に適したユーザーインターフェイス要素を構築し、デザインの元の目標を支持しながら支援できることを願っています。

例1 - サイトメッセージング

このメッセージングの例は、人気のあるメディアのウェブサイトで見つけました。アイコンの位置はそれほど悪く見えません。しかし、フォントサイズやラインハイトなどの要素のスタイルのプロパティの一部を変更すると、解明し始めます。

特定された問題

• アイコンは、相対ユニット（REM）を使用して左端から絶対に配置されます
• アイコンがフローから取り出されるため、親は全体的な間隔を支援するために大きなパディングと左値を与えられます。理想的には、パディングXは均一であり、アイコンが存在するかどうかにかかわらず、すべてがよく見えます
• アイコン（SVGです）もREMSのサイズです。これは、親のフォントサイズの変更があれば、それぞれのサイズを変更することはできません。

推奨事項

アイコンの最上端が青い破線にあることを望んでいますが、赤い破線でアイコンの上端を見つけることがよくあります。

テキストの横にアイコンを挿入したことがありますが、テキストの上部に並べられませんか？ポジションのようなものでアイコンを所定の位置に移動できます。上：0.2EM。これは十分に機能しますが、将来的にタイポグラフィのスタイルが変化した場合、アイコンは不発に見えるように見える可能性があります。

アイコンをより確実に配置できます。これを解決するために、要素のベースライン距離（1つのラインのベースラインから次のラインのベースラインまでの距離）を使用しましょう。

ベースライン距離はフォントサイズ * Line-Heightです。

CSSカスタムプロパティに保存します。

 - 基底様式：calc（var（ -  fontsize） * var（ -  lineheight））;

その後、 （ベースライン距離 - フォントサイズ） / 2の結果を使用して、アイコンを下に移動できます。

 -iconoffset：calc（（var（ -  baselinedistance） -  var（ -  fontsize）） / 2）;

1レム（16px）のフォントサイズと1.5のライン高さで、アイコンは4ピクセルに移動されます。

• ベースライン距離= 16px * 1.5 = 24px
• アイコンオフセット=（24px - 16px） / 2 = 4px

デモ：前後

例2 - 順序付けられていないリスト

私が見つけた2番目の例は、順序付けられていないリストです。 Pseudo-Elementの前にA :: a :: beforeを介してアイコンにWe​​bフォント（Font Awesome）を使用します。注文されていないリストと順序付けられていないリストの両方のスタイリングに関する素晴らしい記事がたくさんあるので、比較的新しい::マーカーの擬似要素などについて詳しく説明することはありません。通常、Webフォントは、使用するアイコンに応じて、アイコンアライメントで非常にうまく機能します。

特定された問題

• 絶対的なポジショニングは使用されていません - 擬似要素を使用する場合、最初の例のようにFlexBoxを使用することはあまりありません。
• リスト項目は、パディングとネガティブテキストインデントの組み合わせを使用してレイアウトを支援します。マルチラインテキストとアイコンのスケーラビリティを説明するときに、これをうまく機能させることはできません。

推奨事項

ソリューションでは擬似要素も使用するため、絶対的なポジショニングを活用します。この例のアイコンサイズは、隣接するコピー（約2倍）よりも少し大きかった。このため、アイコンのトップ位置を計算する方法を変更します。アイコンの中心は、最初の行の中心と垂直に整列する必要があります。

ベースライン距離計算から始めます。

 - 基底様式：calc（var（ -  fontsize） * var（ -  lineheight））;

（ベースライン距離 - アイコンサイズ） / 2の結果を使用してアイコンを下に移動します。

 -iconoffset：calc（（var（ -  baselinedistance） -  var（ -  iconsize）） / 2）;

そのため、1レム（16px）のフォントサイズ、1.6のライン高さ、コピーのサイズの2x（32px）のアイコンサイズで、アイコンは-3.2ピクセルの最高値を取得します。

• ベースライン距離= 16px * 1.6 = 25.6px
• アイコンオフセット=（25.6px - 32px） / 2 = -3.2px

2レム（32px）、ラインハイト1.2、および64pxアイコンの大きなフォントサイズで、アイコンは-12.8ピクセルの最高値を取得します。

• ベースライン距離= 32px * 1.2 = 38.4px
• アイコンオフセット=（38.4px - 64px） / 2 = -12.8px

デモ：前後

結論

ユーザーインターフェイスアイコンには、多くのオプションとテクニックがあります。 SVG、Webフォント、静的画像、::マーカー、およびリストスタイルタイプがあります。背景色やクリップパスを使用して、興味深いアイコンの結果を達成することもできます。いくつかの簡単な計算を実行すると、アイコンをより優雅な方法で調整およびスケーリングするのに役立つと、少し防弾の実装が得られます。

参照：アイコンをテキストに合わせることに関する以前の議論。

以上がタイポグラフィのアラインメントとスケールでUI要素のアイコンの改善の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。