W3C home > Mailing lists > Public > www-style@w3.org > April 2000

RE: Inverted text

From: Peter Stark (ECS) <Peter.Stark@ecs.ericsson.se>
Date: Tue, 25 Apr 2000 08:10:25 +0200
Message-ID: <D898F49E6B34D311A89C00204840355E02B73DE8@eseldnt102.ld.sw.ericsson.se>
To: 'Tantek Çelik' <tantek@cs.stanford.edu>, www-style@w3.org
With "inverted text" I meant that the text and background would change place: background color becomes text color and text color becomes background color.

And I wanted to write something like this:

a:link:focus, a:visited:focus {
	text-decoration: invert;
}

But I could not find an "invert" property value in CSS. Is there any special reason why this has been left out?

Thanks,

Peter

> -----Original Message-----
> From: Tantek Çelik [mailto:tantek@cs.stanford.edu]
> Sent: den 20 april 2000 18:44
> To: Peter Stark (ECS); www-style@w3.org
> Subject: 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 Tuesday, 25 April 2000 02:10:32 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:04 GMT