Re: Inverted text

From: "Peter Stark (ECS)" <Peter.Stark@ecs.ericsson.se>
Date: Thu, Apr 20, 2000, 2:04 AM

> Is it possible with CSS to specify "inverted text" - black turns white and
> white turns  black?

Yes.  Sort of.  CSS doesn't have "relative" colors where you can specify one
color being the "inverse" (by whatever meaning of inverse you mean) of
another.

You can of course do this:

.invertedtext { color:white; background:black; }

However...

> What you often see in mobile phones when a link or menu item is selected.

If this is the specific problem you are looking to solve, then specifying the
colors absolutely as in the above example is _incorrect_ (e.g. what happens
when you get a mobile phone with a color display?).

By "when a link or menu item is selected" I believe you mean the CSS notion of
"focus" where a user:
 - has _hilited_ an item,
 - but _not_ yet _chosen_ it,
 - and is _not_ _actively_ depressing/pushing a button/key,
 - and is _not_ _hovering_ over the item with a pointing device/cursor.

To contrast these different states, compare :focus, :active, :hover, :checked*
and :indeterminate*. *These last two are additions from the CSS3 UI draft.  If
:focus was not the intended state to be styled, it is easy enough to replace
it with the desired state pseudo-class in the examples below.


So, for when a link or menu item has focus:


:link:focus, :visited:focus  /* links having focus */
{
  color:white; background:black; /* CSS-1 values for CSS-1 only UAs */
}

OPTION:focus                  /* menu item having focus */
{
  color:white; background:black; /* CSS-1 values for CSS-1 only UAs */
  color:HighlightText; background:Highlight; /* More specific CSS-2 values */
}


Unfortunately, even these more specific rules do not properly capture the
proper styling abstraction for "when a link or menu item has focus".

I was about to construct an example using the CSS-3 UI draft, when I realized
I couldn't.

Your query has found a couple of (now seemingly obvious) deficiencies in the
CSS-3 UI System Colors, which I will be sure to fix in the next draft.  Thanks
for the indirect feedback.

Missing from CSS-3 UI:
 - "Hyperlink" as a conceptual user interface widget (subtype of "Button")
 - "Focus" state for System Colors

Assuming additional appropriate values for CSS-3, here are the rules you
should use (which will then work with CSS-1, CSS-2 or a theoretically CSS-3 UI
compliant UA, using the forward compatibility parsing rules of CSS-1 section
7.1):


:link:focus, :visited:focus  /* links having focus */
{
  color:white; background:black; /* CSS-1 values for CSS-1 only UAs */
  color:FocusHyperlinkText; background:FocusHyperlink; /* TBA CSS-3 UI */
}

OPTION:focus                  /* menu item having focus */
{
  color:white; background:black; /* CSS-1 values for CSS-1 only UAs */
  color:HighlightText; background:Highlight; /* More specific CSS-2 values */
  color:FocusMenuText; background:FocusMenu; /* to be added to CSS-3 UI */
}


Thanks,

Tantek

Reference: CSS3 UI working draft, <http://www.w3.org/TR/css3-userint>

----------------------------------------------------------------------------
Fate is not without a sense of irony.       http://www.microsoft.com/mac/ie/

Received on Thursday, 20 April 2000 12:44:26 UTC