CSS annoyance - or maybe the browser?
Monday November 17, 2008
I was reading this post on smashing magazine the other day and it mentioned using CSS to set your text to uppercase. Sure, I agree with that. After all, that's what the text-transform property is for. But here's something you may not have known. When I did this the other day in a script that was building documents intended to be copy/pasted, I ran into an unexpected snag. In Firefox 3 (and possibly other browsers, I didn't test) when I would copy the transformed text, it would copy it as it was written in the HTML not as it displayed on the Web page. This was extremely frustrating for the people copy/pasting until I figured out what was going on. I ended up hard coding the all-caps sections just so they would copy and paste correctly.
Comments
That is an annoyance. Maybe JavaScript could have been used to rewrite the necessary strings?
I believe this behaviour is correct.
‘text-transform’ is a style. You don’t get bold or underlined text with copy/paste either.
The only text that should be uppercase in the source code is acronyms like ‘HTML’ and the first letter of a sentence. If you hard code anything else, it won’t make sense to screen-readers.
I personally don’t care what case my documents are copy-pasted in. If the Readers want that uppercase so badly they can fix it by themselves, or just download the HTML page.
Andrew: True. Normally I don’t care what case it’s copied into. But the point of the application I was building was to generate a text document at the end for the user to save and use. And the case of the elements had meaning within the text document.
So yes, normally I wouldn’t care at all, but in this situation I had to care, and the way CSS works (as Dave says, the behavior is correct - CSS styles the underlying text it doesn’t change it) didn’t work for the application.
The main reason it was an annoyance was because I hadn’t tested the results through to the very end and had to deal with confusing (at first) complaints because the text wasn’t capitalized correctly. “but it is capitalized” “not in our reports” “on the Web page it is - OH WAIT!…”
Well, in your case, then, I would say that you should be hard-coding it, not styling, if it’s semantically required to be in upper case.
And when you copy bold text into Notepad? It doesn’t come out bold, isn’t that an annoyance?
How about when you copy a text with an tag and it comes out just regular on Notepad?
When you copy paste you lose some properties. Microsoft Word hardly keeps any of the CSS according to my experience. Tough. The caps are still part of the design.