限られたヘッダースペースに長いWordを挿入する

Question

私のウェブサイトでは、各行にいくつかのアクションアイテムがある基本的なテーブルを提示しています。

XとYは、商標登録されている2つの単語で置き換える必要があり、実際には長い単語です。

Xが「YourHoroscope」で、Yが「YearForecast」だとします。

小さなアイコンの細長い列でテーブルが奇妙に見えることなく、これらの列ヘッダーをエレガントに配置できる最良の方法は何ですか。

Answer 1

まあ、あなたはいくつかの選択肢があると思います：

1. 商標に付随するアイコンがある場合は、ラベルの代わりにテキストを表示し、ユーザーがアイコンヘッダーにカーソルを合わせるとテキストがツールチップとして表示されるようにすることができます。
2. 幅に応じて、テキストをそのまま配置することもできますが、省略記号を使用します。テキストが途切れた場合はツールチップを使用します。
3. 縦書きのラベルを付けると、読みにくい場合があります

4. 昔のように、垂直ヘッダーと同じアイデアである傾斜ヘッダーを配置できますが、読みやすさが向上します。

   

Answer 2

XとYを表すアイコンを実行します。カーソルを合わせると、ツールチップに名前が表示されます。そうすれば、細い柱のスタイルを維持できます。

次のようになります。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

Answer 3

このデータを提示するには、表が最善の方法ですか？最初の2つの列の例を挙げていただけますか？独自の列ではなく、各データエントリの下にXとYの選択肢を表示できる場合があります。

XとYのアイコンを使用して、商標名をHTMLの「title」属性に入れると、マウスオーバーで名前が表示され、スクリーンリーダーで読み上げることができます。または、商標登録された単語を使用して、フォントサイズを少し小さくすることもできます。 Arial/Helveticaは、Verdanaよりも幅が狭く、場所をとらないため、使用するフォントを考慮してください。フォントについては、グラフィックデザインスタックエクスチェンジで確認できます。