Entry

How can I dynamically change an object's text rendering, for example all uppercase?

Is there a way to dynamically change an object's text rendering, for example all uppercase?

Oct 15th, 2002 14:15
Jonas Lindström, Rey Nuñez, http://www.w3.org/TR/REC-CSS2/text.html#caps-prop

CSS includes the text-transform attribute (textTransform property in 
the DOM) that can be used to set or retrieve the rendering of an 
object's text. 

Typical syntax (and possible values) in CSS:
  text-transform: none | capitalize | uppercase | lowercase

and in script
  object.style.textTransform = 'uppercase' 

The sample below uses inline scripting to transform the text on 
different mouse events. Mouseover, then click, then mouseout to test.

<div onmouseover="this.style.textTransform='capitalize'"
  onmouseout="this.style.textTransform='none'"
  onclick="this.style.textTransform='uppercase'"> ... some text here ...
</div>

The sample below uses calls to an embedded stylesheet to transform the 
text. 

<style>
<!--
.transform1 { text-transform: uppercase }
.transform2 { text-transform: capitalize }
.transform3 { text-transform: none }
-->
</style>

<div onmouseover="this.className='transform1'"
  onclick="this.className='transform2'"
  onmouseout="this.className='transform3'">  ... some text here ...
</div>

Note that the samples apply only to IE4/5 and NS6. Dynamic styles are 
not supported in Netscape 4 and below.