WordLog

A weblog authored by Carthik about the latest in the WordPress world.

Saturday, September 18, 2004

Styling and using the <ins> tag

Filed under: — Carthik @ 5:28 pm

There is a tag called ins. It has a companion called del. Both of them are not used too often, and it is not easy to find information about what they do, or how to use them and style them.

The Quicktags available in the WordPress “Write” menu has button for both these tags, ins and del.

In a previous post, I edited the content to reflect some changes. I wrapped the new text, which was “μ , where μ (MU) stands for Multi User. Hopefully, it will soon be available to the public.” within a set of <ins> tags. Now the question was as to how to style this to show my readers that this text had been inserted later, after the post had been originally published.

By default, everything within an ins tag pair is underlined (and for del, the text is struck out).

I did not want the text I inserted to be underlined, since that would look like a link. So I wanted it changed to an dotted underline. Also I wanted to say “(Updated)” after the text so people would know what there is a dotted line, and so that everyone notices that there has been an update.

To change the default underline and create a 1px dotted underline, I used the following in my css stylesheet:

ins {
text-decoration: none;
border-bottom: 1px dotted;
}

To insert the text (Updated) after the relevant portion, I used the following in my CSS stylesheet:

ins:after {
content: "(Updated)";
}

The CSS 2 specification says one can use :before or :after to insert the text before or after the relevant portion. The spec also mentions that several different values can be inserted. I inserted a string, i.e., (Updated).

What is remarkable is that when I first searched google for ins tag css text, I ended up at a WordPress Support page!

Adding rules for the del and ins tags in your stylesheet, and using the tags responsibly can make for a better experience for your readers.

7 Comments

  1. [...] 2004 Style your inserts Filed under: Web Development — Davor @ 10:03 am Nice way of styling <ins> and <del> tags. [...]

    Pingback by kurcula.com » Style your inserts — 9/19/2004 @ 2:03 pm

  2. nice idea. you could extend it further by generating the time it was updated. I.e.
    ins:after {
    content: “(Updated ” attr(datetime) “)”;
    }
    Unfortunately, the date that’s automatically added to the ins tag when you click the button is not very user friendly. I’m not sure you can do anything about that with just CSS.

    Comment by jonner — 9/18/2004 @ 6:28 pm

  3. That is correct! I thought I could not use combinations of values. I have updated my stylesheet likewise and it now show the time too.
    Thank you.

    Comment by Carthik — 9/18/2004 @ 6:54 pm

  4. Style your inserts
    Nice way of styling <ins> and <del> tags.

    Trackback by kurcula.com — 9/19/2004 @ 10:04 am

  5. Wow, shocked I have not seen this mentioned before anywhere. No more strike tags for me :)

    Thanks as always for the heads up Carthik

    Comment by Mark Michon — 9/20/2004 @ 12:38 pm

  6. In a post in the support page you mentioned, there is a reference to an “IE7 hack.” It’s a javascript file that makes a visitor’s IE/Win browser see your pages with (most) CSS2/3 selectors correctly. It’s still in alpha. I played with his demos with IE6 and FF1 side-by-side and was impressed.

    The creator of IE7 just happens to be a WordPress user.

    Comment by Dennis Williamson — 10/17/2004 @ 5:46 pm

  7. [...] ctualización)”; } Anotación de cambios en los documentos: los elementos INS y DEL wordlog.com: Styling and using the <ins> tag

    C [...]

    Pingback by Juglar :: Cambios en los documentos: INS y DEL :: August :: 2005 — 8/12/2005 @ 11:24 am

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

 

Powered by WordPress

eXTReMe Tracker