---json
{
    "description": "How to add typographic effect to your text",
    "page_id": "wy9gnqk5k25wul3vdx7t8",
    "title": "Typographic effect and attributes in ComboStrap"
}
---
====== ComboStrap Styling -  Typography ======

===== About =====
This page regroups all [[docs:content:typo|typographic]] component of ComboStrap



===== Attributes =====

''Typographic Attribute'' are [[docs:styling:styling|styling attribute]]
  * [[release:deprecated:text-align]]
  * [[docs:styling:font-size]]
  * [[docs:styling:text-color]]
  * [[docs:styling:boldness]]


===== Component =====
The below components are specific typographic components:

Heading:
  * [[docs:content:heading|heading]] 
      * structural heading (table of content)
      * typographical heading (component heading)

Text:
  * [[docs:block:text|text]] : apply [[#attributes|typographics attributes]] to one or several paragraph at once
  * [[docs:content:itext|itext]] : apply [[#attributes|typographics attributes]] to one or several characters/words at once






===== Typographics markup =====

==== Bold ====

To modify the [[docs:styling:boldness|boldness]] (known as font-weight), you can use ''double star'', ''name'', ''value'' or ''superlatif''. Check the dedicated page: [[docs:styling:boldness]]

Example with the [[docs:content:itext|itext component]]
<webcode name="Default" frameborder="0">
  * Input
<code dw>
This text is a <itext boldness="bold">bold text</itext> and this one **too**.
</code>
  * Output:
</webcode>


==== Italic ====


<webcode name="Default" frameborder="0">
  * Input
<code dw>
This text is a //italic text//
</code>
  * Output:
</webcode>

==== Highlighting ====
[[docs:content:highlight]]
<webcode name="Default" frameborder="0">
  * Input
<code dw>
Highlighting ''this highlight''
</code>
  * Output:
</webcode>



==== Underline ====
[[docs:styling:underline|Underline decoration]].

<webcode name="Default" frameborder="0">
  * Input
<code dw>
This text is __underlined__
</code>
  * Output:
</webcode>


==== Delete (line-through) ====
Line-through / Delete decoration.
<webcode name="Default" frameborder="0">
  * Input
<code dw>
This text is <del>deleted</del>
</code>
  * Output:
</webcode>

==== Subscript ====
<webcode name="Default" frameborder="0">
  * Input
<code dw>
This text is a <sub>subscript</sub>
</code>
  * Output:
</webcode>

==== Superscript ====
<webcode name="Default" frameborder="0">
  * Input
<code dw>
This text is a <sup>superscript</sup>
</code>
  * Output:
</webcode>