Inserting a long word in a limited header space

Question

In my website, i'm presenting a basic table that has some action items for each row.

X and Y must be replaced by two words that are trademarked and the words are actually long.

Say X is "YourHoroscope" and Y is "YearForecast".

What are the best ways I can elegantly put these column headers without causing the table to look weird with elongated columns for the small icons.

Answer 1

Well, I think you have a few choices:

1. If you have an icon to accompany the trademarks, you could attempt in place of the labels and have the text appear as a tooltip when the user hovers over the icon-headers.

2. Depending on the width, you could put the text in there as is, but with a ellipsis, again with a tooltip if the text is cutoff

3. You could put vertical labels, which may prove difficult to read

4. As with the days of old, you could put slanted headers, which are the same idea as vertical headers, but provide better readability:

   

Answer 2

I would do an icon that represents X and Y that on hover would show a tooltip with the name. That way you could keep your thin column style.

It could look something like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

Is a table the best way to present this data? Can you give an example of what would be in the first two columns? You may be able to present the X and Y choices below each data entry instead of in their own columns.

You could use icons for the X and Y and put the trademarked names in the HTML "title" attribute so that the names are visible on mouseover and read by a screen reader. Or you could use the trademarked words and use a slightly smaller font size. Arial/Helvetica is a narrower font than Verdana and takes up less space, so keep the font you use in consideration. You can ask about fonts on the Graphic Design Stack Exchange.