CSS text-decoration: reverse

Question

I'm surprised that there is no "text-decoration: reverse" in CSS as it seems very awkward to achieve using JavaScript. I.E. set the element's foreground and background color to the background and foreground of the parent respectively.

I noticed JavaScript techniques for that here

Surely it's not that complicated?

Answer 1

well you could try using jQuery, it's a simpler way to achieve the same as normal javascript.

Answer 2

What are you calling reverted? Do you mean to set the background as the foreground color and vice versa? (Maybe it's a stupid comment, but if so it is not a decoration is it?)

Anyway you're about to have a fight between DRY and MVC here :

• either you declare a new CSS class each time you want to do that. That's redundant and painful, but you indeed separated the style from the code.

Typically:

.mydiv {
   background-color: blue;
   color: red;
   font-family:...;
   (...)
}


.mydiv:hover {
   color: red;
   background-color: blue;
}

• another option is to do that through javascript. Proxify suggested using jQuery.

  The result would probably look like that... (not tested)

$(".invert").map(function (el) {
       var color = el.css("color");
       var bgcolor = el.css("background-color");
       el.css("color", bgcolor).css("background-color",color);
    })

Answer 3

The concept of "reversing" background and foreground style of text is not that easy to implement to the browser. If one allow your "text-decoration: reverse" in the browser, should background image also reverse onto texts? This is not what a browser today can draw.

Now consider transparencies and those alpha value. There are many aspects that make your idea of "reverse" impractical to implement in general.

Answer 4

While there is no CSS available to reverse text, there does exist a html element called bdo (bi-directional override) and the selector dir="rtl" and with it you can reverse text.

You can reverse the text in your page

If you then give it a class, you can then add additional style elements, for example, and you'll need to view the source code for this page to "read" what I've done. (p.s. you don't need to include the element, that's there to differentiate the code from the rest of this blurb...)

You can reverse the text in your page

.reverso { color: #cc3300; font-size: 200%; }

and so on.

I hope that helps (O: