Stylesheets - Style to indicate that popup info is available

Author

Style to indicate that popup info is available

Jukka K. Korpela

2004-08-12, 7:17 am

(Discussion started in c.i.w.a.h. under Subject "image alt style pop up
for text", now changed to discussing the use of a title="..." attribute
to create a popup info text, and how to make it obvious to users that
there _is_ some info available.)

Neal <neal413@yahoo.com> wrote:

> On Fri, 6 Aug 2004 16:09:39 +0100, Alan J. Flavell
> <flavell@ph.gla.ac.uk> wrote:
>

I hadn't heard of the convention before, but it sounds reasonable.
[color=darkred]
> I'd use just a dotted underline.

I guess you mean a dotted bottom border. I don't know of any way, in HTML
or CSS as currently specified and generally implemented, to create a
dotted underline proper. But bottom borders can be used to simulate them.
(They are still different beasts. Underlining is at the baseline level,
or just a little lower, whereas bottom border is below the element as a
whole, which means that it's below all descenders.)

But a dotted bottom border is some browsers' default rendering of <abbr>
and <acronym> elements. This may cause confusion: users accustomed to
such rendering might get the correct clue "there's info available, if you
move the pointer over this piece of text" - but perhaps also the
incorrect clue "this is an abbreviation or an acronym". Besides, people
who are _not_ familiar with such rendering might assume that the border
is some variation of _link_ underlining.

> Left and right margins on inline
> elements get weird when wrapped.

I wonder what you mean by such effects. Rather, the top and bottom border
might be disturbing by making adjacent text less readable and even partly
covering it - or borders for other elements.

But there are other problems. Using just e.g.

..titled { border: dotted black thin; }

(together with class="titled" for each element that has title="..."; yes,
we would like to be able to use just a [title] selector, but let's get
real) would make the text inside virtually hit the left and right border,
so we need some left and right padding. Moreover, the border is often
_too_ noticeable, drawing too much attention. Changing the color to some
shade of grey would help a little, but probably not enough. Making it 1px
instead of thin would appear to be natural, though naturally px values
should be avoided (a 1px border looks ridiculous when the font size is
very large, say 60px). More importantly, IE does not support a 1px dotted
border but makes it dashed. Would this be acceptable?

We might also make the border color different from text color, to avoid
any undesired effect on text legibility (especially when the border
becomes dashed - a dash might look too much like an "i" or "l").

So what I would currenly use is

@media screen {
..titled { border: dotted #090 1px;
padding: 0 0.1em; } }

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Sam Hughes

2004-08-12, 7:17 am

"Jukka K. Korpela" <jkorpela@cs.tut.fi> wrote in
news:Xns953DE966CCBFEjkorpelacstutfi@193.229.0.31:

> Neal <neal413@yahoo.com> wrote:
>
>
> I hadn't heard of the convention before, but it sounds reasonable.
>
>
> [...]
>
> But a dotted bottom border is some browsers' default rendering of
> <abbr> and <acronym> elements. This may cause confusion: users
> accustomed to such rendering might get the correct clue "there's info
> available, if you move the pointer over this piece of text" - but
> perhaps also the incorrect clue "this is an abbreviation or an
> acronym". Besides, people who are _not_ familiar with such rendering
> might assume that the border is some variation of _link_ underlining.

Then instead of using a dotted underline, a dashed underline could be
appropriate. People might think, "there is a tooltip," while noticing that
it is different from abbr and acronym styling.

--
In a room with thirty-seven people, never have everybody shake each other's
hand.

Jukka K. Korpela

2004-08-14, 7:14 am

Mad Bad Rabbit <madbadrabbit@yahoo.com> wrote:

> What about a span with text "ⓘ Info", styled as white letters
> on blue background with a thin solid black border? That ought to be
> easy enough to spot...

I'm afraid you might be (half) serious. First, using &#bignumber;
references always causes problems, and I think you need a better reason
to invoke them. (How many speech browsers can speak it out? How many
fonts commonly available contain it.) Second, your approach means extra
markup. Third, both the character and the word indicate just
'information', typically used to identify an information desk where one
can ask just about anything. It's hardly a universally recognized symbol
for 'some extra hint available'.

--
Yucca, http://www.cs.tut.fi/~jkorpela/