Edit online


Trademarks are used to specify legally registered words and they are often used in technical documentation. To specify a trademark, your DITA content could use a structure similar to this:

 <tm tmtype="tm">My Product Name</tm>

Depending on the value of the @tmtype attribute, a different symbol is appended to the text: (®, ™ , or ℠).

The structure of the merged HTML document the CSS will apply to is:

<span class="- topic/tm tm" tmtype="tm">My Product Name<span 
                          class="- topic/tmmark tmmark "></span></span>
Edit online

How to Style the Trademark Element Text

To change the style of the entire trademark text, you can match the topic/tm class like this:

*[class ~= "topic/tm"] {
Edit online

How to Style the Trademark Symbol

To change the aspect of the trademark symbol, you can use the topic/tmmark class. Usually, common fonts already render these symbols smaller and with superscript by default. The following example does it from the CSS:

*[class ~= "topic/tmmark"] {
	vertical-align: super;
	font-size: smaller;