What is the best way to highlight a selected option in text/link format without using <strong>
or <b>
?
I cannot use underline as they are already links and are therefore the underline is used to show they are clickable.
I don't want to use <em>
or italics as I believe it is too subtle and doesn't tie into the design of the site.
The best way would be to use bold, however making a text selection bold increases the SIZE of the text, changing the layout of the box in certain cases. Here is an example:
Currently ordered by "episodes" and therefore "Episodes" is bold and "Treatment Days" is underlined - immediately you can tell that you are viewing by "Episodes" and you can change the order to be by "Treatment Days".
However when you do this "Treatment Days" becomes bold and as such gets bigger, wrapping the line of text to the next line as such:
Aside from looking bad, it also pushes "Episodes" down which can be slightly confusing or awkward for users.
How can I better display this box? Bear in mind that the box itself is quite small (although may change width/height - it is a cell in a <table>
and its width and height are dependant on the rows and cols in the table), but this is the "general" size it could be. As such things like having bullet points, or anything may be unusable as it increases the space.
Edit: after @mervinj's ideas and answers I have played with colours - I was having a hard time because the box itself is quite dark, and different colours weren't showing up well against the background. So I have come up with this: i.e. change the <span>
background colour and text colour to show which is selected and which is selectable.
Does this make sense? Does it look "good". I think it looks a bit garish. Would you be able to see at a glance which area is "selected" and which area was not selected?
Edit 2: saying that... I kinda like this (half way house)