you're reading:
Bold text, Capitalization, Html & inline css codes, Italicized text, Subscript, Superscript, Underlined etc. text

Formatting text pt. 4: transformations

• All the following in the html post or page editor, of course (as well as in text widgets).
• “Span” tags are for words or phrases within a paragraph; for sections comprising one or more complete paragraphs, you use “div” instead.
• Multiple tags applied to the same text must be nested, e.g.: opening strong tag – opening em tag – text – closing em tag – closing strong tag. Multiple “style” elements must be combined in one tag – see “Note on coding” here.
• A few themes include some quirky design ideas; for instance, “strong” text turns up red in Fjords 04, grey in Solipsus.

<em>TEXT HERE</em>
<span style="font-style:italic;">TEXT HERE</span>
<strong>TEXT HERE</strong>
<span style="font-weight:bold;">TEXT HERE</span>
Line under:
<span style="text-decoration:underline;">TEXT HERE</span>
Line through:
<span style="text-decoration:line-through;">TEXT HERE</span>
Line over:
<span style="text-decoration:overline;">TEXT HERE</span>
Superscript (smaller size):
<sup>TEXT HERE</sup>
or (normal size):
<span style="vertical-align:super;">TEXT HERE</span>
or (adjustable size):
<span style="font-size:PERCENTAGE HERE;vertical-align:super;">TEXT HERE</span>
To freely adjust vertical alignment, write percentage in place of “super”.
Subscript (smaller size):
<sub>TEXT HERE</sub>
or (normal size):
<span style="vertical-align:sub;">TEXT HERE</span>
or (adjustable size):
<span style="font-size:PERCENTAGE HERE;vertical-align:sub;">TEXT HERE</span>
To freely adjust vertical alignment, write negative percentage in place of “sub”.
<span style="text-transform:DEFINE;">TEXT HERE</span>

Where I’ve put DEFINE, you write uppercase (converts all letters to uppercase), or lowercase (converts all letters to lowercase), or capitalize (capitalizes the first letter of each word), or none (no transformation).

Please don’t paste code in comments – see comment guidelines.


12 thoughts on “Formatting text pt. 4: transformations

  1. Hi Panos.

    Just a couple of observations:

    Semantically, the use of <ins> tags to underline a word, is not correct; and since the <u> tag is deprecated, I would recommend using the CSS variant instead.

    Also, to strike a word by using the <del> tags is incorrect, it’s better to use <strike> (or the CSS variant) instead.

    For the correct use of the aforementioned tags, I’d recommend reading the following:

    a) HTML ins tag. This link also explains the use of the “del” tag.

    b) HTML strike tag.

    Hope the codes display well when I post this.

    Posted by devblog | July 10, 2009, 02:37
  2. Akismet sucks…

    I posted a comment with some recommendations for your article ( that’s the reason why I wanted to have your email address) and since I posted a couple of links, it was flagged as spam.

    Oh well…

    Posted by devblog | July 10, 2009, 02:41
  3. Welcome here devblog – original comment restored – sorry for that!

    (Akismet is not to blame really: there’s an option for no. of links in Settings>Discussion; I don’t have many comments, and I don’t keep a constant eye on this blog, so I had decided to keep it on the safe side.)

    And thanks for the suggestions – I updated the post accordingly. I removed the ins and del versions, but I didn’t add the strike tag: if you use it in the wp editor, it is automatically converted to the text-decoration code anyway.

    Posted by Panos | July 10, 2009, 04:23
  4. Hey. I’ve got a question. I’m working with LaTex and my expressions are most times not in line with the rest of the line they are on — a tad high or a tab low. You can see some of my example post on my site. Use the LaTex category. I’m trying to find the right combination of text size, word spacing, and vertical spacing.

    Anyway, using the normal text size and “vertical-align:super” code you’ve shown me, I’ve had success lining up a LaTeX expression. But I’ve not had much success with the “vertical-align:sub” code. I need an adjustable way to lower TEXT, keeping it normal size. Any suggestions or pointers would be appreciated?

    Posted by bowman | January 10, 2010, 04:15
  5. @bowman: The “adjustable way to lower TEXT” is the same code command, only instead of fixed words (such as “super” or “sub”) you use percentages. For example:

    <span style="vertical-align:25%;">RAISED_TEXT_HERE</span>

    <span style="vertical-align:-25%;">LOWERED_TEXT_HERE</span>

    Same thing for the LaTex elements, e.g.:

    <img style="vertical-align:25%;" [etc.]

    Posted by Panos | January 10, 2010, 05:41
  6. Thank you. With this and word spacing and few other codes, I’ve learned l lot from you. I appreciate that.

    Posted by bowman | January 10, 2010, 06:45
  7. Man! Too much information for a ‘computer impaired’ like me. So how can you make a link to your blog out of your name? pliz?

    Posted by julia | December 9, 2010, 00:59
  8. Users > Personal Settings > Account Details: paste blog URL in the “website” field, save changes.

    Posted by Panos | December 9, 2010, 01:57
  9. Can someone please help… I wish to combine a superscript and ‘small font’ command for a reference number (as you see quoted in medical journals…)

    So far I have got (1) but the font size is not changing. Can anyone shed some light please?

    Thank you

    Posted by phil | September 27, 2011, 19:07
  10. As I’m fond of saying when I see “someone”, this isn’t a forum, this is my blog: there are no someones other than me!

    Check the post more carefully (under Superscript – adjustable size).

    Posted by Panos | September 28, 2011, 03:48
  11. Hi Panos,
    I have a question….

    Under your notes you say this is for the HTML code or page editor – does Page Editor mean CSS upgrade?

    I am using the Oulipo theme, and on the left hand side is the fixed title and tagline. They are both written in capital letters, and I would like to change that to lower case. I have the CSS upgrade but cannot figure out how to change this.

    Are you able to help me with this code?


    Posted by voyageindesign | March 11, 2012, 13:02
  12. No, the post/page editor is the main editor screen: what you arrive at in Posts > Add New or Pages > Add New. The CSS editor is found in Appearance > Custom Design > CSS.

    To override the small caps of the title and tagline in Oulipo you need to add this in the CSS editor:

    h1, .description {

    For future CSS questions please post in the CSS section of the forum: users who’ve bought the upgrade are entitled to staff support, and WP has repeatedly annoyed us volunteers, so we’re not willing to help with something they’re obliged to do.

    Posted by Panos | March 11, 2012, 15:38


author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.


  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: