A Web Design Community curated by Chris Coyier

New Site: HTML Ipsum

By: Chris Coyier on 12/12/2008

There are a number of Lorem Ipsum sites that I like. I even have a dashboard widget for generating it. But none of them does what I REALLY want, which is to give me the Latin text already in HTML tags. So, I built one.

 

Visit Site

 

Clicking on any of the blocks automatically copies the text to your clipboard! Let me know if you have any questions/comments/suggestions.

92 Responses

  1. Gabe says:

    Good for you – dude that’s dope. Thanks for the resource!

  2. Mike says:

    Great resource Chris! I will defiantly be using the ‘Kitchen Sink’ code in my future developments, thanks!

  3. Gerry says:

    Nice idea, was thinking about something similar a while ago. However I do need to point out it’s Latin and not Greek ;-)

  4. Mark Kordon says:

    Great idea! Except it doesn’t copy to clipboard in FF. That can be done using jQuery and Flash if you want.
    If it doesn’t work, then hide it, I think.. :o)

  5. Michael says:

    Chris, thanks for this! I too was getting a bit tired of ‘viewing source’ at lorem2, my “previous” favorite ipsum-site.

    Also, you need to know your underwear is showing.

    and no, i didn’t put your underwear up at flickr.

    :) Thanks again!

    • I refuse to care about that setting the background color stuff. Every browser defaults to white. If you are one of the 0.001% of people who would ever change that, doesn’t that mean that you WANT to see that color? More likely, you’ve changed it just so you can find sites who haven’t set a color so you can shake your fist at the designer.

      • Tim Wright says:

        Good for you, I think it’s stupid too.

      • These people probably are quite annoying. Please also respect the other 0.001 % who use inverted high contrast color schemes for good reasons (mostly bad eye sight). BTW, the problem is not the missing background color. It’s setting the foreground without setting the background. html-ispum.com does not set colors at all which is indeed preferred by many.
        And thanks for this great site :-)

    • Michael says:

      <!--Commenting Style-->

      .humor {sarcasm: 100%; wit: dimmed; humility: auto;}

      Chris, Tim, RatTus– you’re kidding, right? Seriously, you not really sitting there incensed are you? If so, I’m sorry. No, a really heartfelt sorry.

      <div class="humor">

      It was certainly not my intent to offend the logic of any of you. I was simply commenting on 1) How great his new site offering would be, and 2) how even the simplest rules get by the masters.

      But now is it appears I’ve uncovered an even bigger chasm– between those with a penchant for learning, and the others that seem to know it all.

      I as well now seem to have two additional sensei. I’m guessing my comment bore some fruit after all– instead of being simply boring and an unintentional-aggression-catalyst.

      <div>

      Best regards to all. And thanks for the two new feeds Tim/Rat

      Michael

    • I didn’t mean to sound pissy about it, but it’s like the third time this week someone has mentioned that to me and linked me to Zeldman’s article. I just feel like people haven’t really thought it through and are just regurgitating Zeldman as gospel. He’s a web hero, for sure, but this underwear business is inane to me.

      • Eva Vesper says:

        i prefer boxer briefs.

        but i have to agree with you, if you’re going to be playing with browser background colors, then you’re probably making a whole bunch of browser setting changes (font, size, bg color, font color) that many just don’t care about.

        and thanks for this website, it makes life easier. =) kudos dude!

    • Will says:

      What exactly is the point behind it? I’ve read Zeldman’s post but it still makes absolutely no sense to me. I’m in agreement with Chris on this one.

  6. Nathan C says:

    That is really cool. Maybe you could make it user based…

  7. Michael says:

    Thanks for doing this, it’s a real timesaver

  8. Edwin says:

    Interesting! Very nice and nifty jQuery script to make it work :)

  9. Richard says:

    Brilliant.
    Would be good if the copied to clipboard message chased the mouse, for when I click on a box below the fold…
    Brilliant.

  10. Alex D says:

    I’ve just spent the last 10 minutes adding in to some Lipsum! Wont have to do it again thanks to you! Cheers :D

  11. That’s great!.. :)..

  12. Great looking site Chris. Thanks for putting it together. BTW, I’m on Windows with FF3 and no copy for me either. The message pops up and notifies me that the text has been copied, but it doesn’t actually copy it.

  13. Here’s what I’ve been using, mindreader. There are a couple additional elements that are important to me. First, It includes H1, H2, and H3 headers. Along with strong and p, I also have em, a, br, hr, and code.

    Importantly, too, the first sentence of the blockquote does not have and opening and closing p tag, which adds a tricky element when creating the CSS.

    <h1>H1 Header</h1>
    <h2>H2 Subhead</h2>
    <h3>H3 Subhead</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
    <blockquote>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
    <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
    <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p></blockquote>
    <p><strong>Phasellus ultrices</strong> nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
    <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
    <li>Nunc dignissim risus id metus.</li>
    <li>Cras ornare tristique elit.</li>
    </ul>
    <hr />
    <p><em>Phasellus ultrices</em> nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
    <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
    </ol>
    <p><a href="">Pellentesque fermentum dolor.</a> Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.<br />
    Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</p>
    <code>Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</code>

    • That’s pretty nice, thanks for sharing. Originally I had a blockquote without paragraph tags as well, but someone pointed out that that is not valid. I didn’t want to encourage anything that wasn’t valid code. But… if you are using a CMS like WordPress, it totally does that with multi-paragraph blockquotes (where the first paragraph doesn’t get paragraph tags but the rest do).

  14. Thanks Chris, this is hawt! I used to get annoyed doing the greek text, but you make it so easy. Got some good response from a tweet I posted yesterday about your site. Lots of peeps area pretty happy about it. Nice work, thanks again.

  15. ZenemiG says:

    Über sexy, really loved it. Bookmarked.

  16. That’s a great tool, great time saver!
    Thanks a lot Chris!

  17. I really like the ease of use. You just click on the paragraph and the content is automatically copied. No extra keys to press. Really impressed!

  18. Max says:

    Great ill be using it alot, Reccomendation: add a few paragraphs with no html…for PSD designs, then i dont have to go to any other site or delete the html tags :)

  19. Tim says:

    I’m using Safari 3.2 on Mac Leopard, and I also tried it with Firefox v3 on mac. The copy to clipboard does NOT work for me.

  20. Alan Valek says:

    This is fantastic! Thanks!

  21. I’m trying to figure out what the magic combos are that are making the copy function not work. All my testing so far is positive:

    Operating System: OS X 10.5.5

    Browser: Firefox 3, Safari 4, Opera 9.61

    Flash Version: 9.0

    Outcome: All work

    -=-=-=-=-

    Operating System: Windows XP (SP 2)

    Browser: IE 7

    Flash Version: 10

    Outcome: Works

    -=-=-=-=-

    If anyone else wants to chime in, all these variables would be nice to have.

  22. Shane says:

    Congratulations, great site. It will sure come in handy. Thanks.

  23. Bob says:

    Great idea! And using the excellent Scrapbook addon for Firefox makes it possible to use it even offline. Thanks Chris.

  24. Luca says:

    Good idea Chris! :)

    What do you think about providing an API?
    I think it would be usefull…

  25. aaronbazinet says:

    Dude, very cool. Thanks for the tool, it’ll be very useful. I’m diggin’ the new WordPress comments too.

  26. Gabriel says:

    That’s excellent, thank you! I’ve wanted something like this for a while too. What a novel idea to go ahead and make it, and give it to everyone else to use! ;-)

  27. pab says:

    very cool Chris, I’ve used it twice today on two projects, a non html version like max said would be nice too

  28. Paul says:

    Doesn’t work in Firefox 3 (for me anyway)

  29. Patrick says:

    Using Windows Vista SP1

    Does not work for me in:

    Chrome 0.4
    Firefox 3
    Safari 3.1.2

    Works in:

    Opera 9.6

  30. I’ve made this into a TextMate Bundle.

    Get it here.

    All snippets have the tab-trigger ipsum→

    Includes Haml-version too for you fellow Ruby folks.

  31. Shirley says:

    Well that’s nice, but it needs a little tweaking.
    And it be cool to have options.. ie. I need a list with 8 short elements.
    Or give me a series of short paragraphs. etc…

    Otherwise great idea.

  32. Jeremy says:

    Nice Chris, thanks for putting this one together, a huge improvement over the site I have used previously. Simple and easy to use. Looking forward to seeing what else you have planned for the future.

  33. Patareco says:

    Nice site! It will be useful

  34. Raya says:

    Good idea indeed!

  35. Nathan C says:

    Just a quick bit of info: ipsum means itself in Latin. (I am taking Latin right now and just had that word.)

  36. surreal says:

    Lorem ipsum in general is a combination of random Latin words and random gibberish.

    Very nice and very useful, as usual Chris. Keep the good work.

    On an unrelated note, under the downloads section…when I try to download Photo Revealer it gives me a 404 :/

    Could you please reuplad? I’m guessing the file is missing since other downloads work just fine.

  37. Updated the site with Coda Clips and TextMate bundles.

    Huge thanks to Mikkel Malmberg and Toby Pitman!

  38. webthingee says:

    o.k., Sunday morning… sitting watching football and doing some hand coding… pretty average day… then HTMLIPSUM appears in my rss reader.

    I can give today a +1

    LOVE the one click copy to clipboard!
    Great Idea with the column layout!

    Thank You!!

  39. koew says:

    Well done, Chris! It’s good to see that my comment (from the last Intersting Links-post) made a breakthrough to someone more resourceful than me at the moment. Bookmarked the site and will use it further on.

  40. Maikel D says:

    Copy function doesn’t work in Opera 9.62 on XP.

  41. Evan Riley says:

    Thanks chris, ever since you started this, ive been using this site like crazy for my .PSD Designs :)

  42. Thanks so much! This is perfect to fill into those newly developed mockups to share with clients, and I love that you have the tags there. You’ve made a lot of our lives easier. :-)

  43. Brad C. says:

    Outstanding work! I will definitely be using this going forward!

  44. B. Ackles says:

    Hey Chris,

    I really like this simple, yet useful tool. I’ve bookmarked this site and I will definitely be using it in my projects.

    I’m curious if you’re willing to open source the code, so we can build other tools with the same concept of copying to the clipboard.

    I’d definitely be willing to give you some link love, if you upload it to github. Since it’s all client-side code, I guess I could just get it with a little command+U hacking but I’d rather just get your permission.

    Thanks Again!

    • Feel free to do whatever you want with the code, short of copying it exactly and publishing it elsewhere.

      Beware the clipboard thing though, lots of people are reporting that it doesn’t work (it’s a Flash problem). I’m thinking of just pulling that feature.

  45. sarah says:

    FANTASTIC!
    ..and he does it again!!

  46. andyjamesnelson says:

    Hey I am using firefox 3.5 on an imac running 10.5.5 and the copied to clipboard doesn’t work?

    Apart from that the site is very cool.

  47. andyjamesnelson says:

    Hey – so i just installed flash and now it works!

    Don’t pull that feature its very useful – maybe just a notice that flash is needed.

    Thanks for all the resources you provide. There ace.

    Andy.

  48. This is by far the most useful ipsum site i’ve seen. Thanks Chris!

This comment thread is closed. If you have important information to share, you can always contact me.

* This website may or may not contain any actual CSS or Tricks.