Grow your CSS skills. Land your dream job.

New Site: HTML Ipsum

Published by Chris Coyier

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.

Comments

  1. Permalink to comment#

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

  2. Mike
    Permalink to comment#

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

  3. Gerry
    Permalink to comment#

    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
    Permalink to comment#

    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)

    • It does work in Fx and it does default to flash.

      http://html-ipsum.com/js/jquery.copy.js

    • Mark Kordon
      Permalink to comment#

      Oh, I see.. Well. No copy here :(

    • Are you Windows? Maybe that’s the issue? Let me know the details and I’ll try to do some testing.

    • Permalink to comment#

      It’s working for me. XP SP2, FF3 and no idea what flash, probably quite old.

    • XP Service Pack 3, MF 3

      Works fine (and im loving it by the way)

      Is this intense debate again or a new commenting system?

    • Mark Kordon
      Permalink to comment#

      Yes,
      Windows Vista Business 64 bit,
      Firefox 3.0.4,
      Flash 10,0,12,36.

      Flash works on other sites.

    • Permalink to comment#

      I’m using Vista Ultimate SP1, FF3. And when I click it says ‘copied to clipboard’ but it doesn’t seem to update what is actually on the clipboard.
      If I copy it works fine though.

      I guess it just means we should slightly less lazy!

      Thanks for the Great site Chris!

    • Permalink to comment#

      This is my experience as well. In any case I’ve added this to my default list of resources for development. Thanks for your excellent work.

    • Anrkist
      Permalink to comment#

      Same problem… not that it’s a big deal. Vista 64bit, FF3, Flash 10.

    • Permalink to comment#

      Great site, but it doesn’t copy to my clipboard either, I’m using FF on Windows Vista 64bit (yeah I know vista sucks but it’s all I have :-( )

      BTW Thanks for sharing it with us!

  5. Michael
    Permalink to comment#

    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.

    • Permalink to comment#

      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
      Permalink to comment#

      <!--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.

    • Permalink to comment#

      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
      Permalink to comment#

      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. Permalink to comment#

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

  7. Permalink to comment#

    Thanks for doing this, it’s a real timesaver

  8. Edwin
    Permalink to comment#

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

  9. Permalink to comment#

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

    • I fixed that up so now the “Copied to Clipboard!” message does come down and is visible no matter where you are.

  10. Permalink to comment#

    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).

    • Feel free to steal it if any of it is useful, by the way. Which may go without saying. But I said it anyway.

  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. Permalink to comment#

    Ü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. Permalink to comment#

    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 :)

    • Permalink to comment#

      Maybe make the site with 2 tabs, html version, non-html version. Although the sites name IS HTML Ipsum…

  19. Tim
    Permalink to comment#

    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. Permalink to comment#

    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.

    • O/S: Ubuntu Hardy Heron 8.04 (GNOME),
      Browser: Firefox 3.0.4,
      Flash 9.0 r124,
      Outcome: Works great!

    • Nathan
      Permalink to comment#

      O/S: Windows Vista Home Premium,
      Browsers: Firefox 3.0.4, Safari 3.1.2, IE 7, IE 6 (using IETester)
      Flash 9.0 r124,
      Outcome: Works great!

      Nice work by the way.

      Keep it up.

    • Permalink to comment#

      Operating System: Windows Vista Ultimate 32-bit SP1

      Browser: Firefox 3.0.4

      Flash Version: 10(I think…. how do I check?)

      Outcome: Doesn´t work

    • Permalink to comment#

      Hi Chris,
      I don’t know if you figured out the problem yet.
      Flash 10 is known to disable javascript interaction.

      Please read:
      http://ajaxian.com/archives/flash-10-and-the-bad-news-for-javascript-interaction

      Hope it helps.

    • Interesting. So it’s definitely the version of Flash that is the problem. My windows install is showing version 10 though and it is working, so that is strange. This is far beyond my development reach, although if a fix is found someday I’m happy to implement it.

  22. Shane
    Permalink to comment#

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

  23. Bob
    Permalink to comment#

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

  24. Permalink to comment#

    Good idea Chris! :)

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

  25. aaronbazinet
    Permalink to comment#

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

  26. Permalink to comment#

    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. Permalink to comment#

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

  28. Permalink to comment#

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

  29. Permalink to comment#

    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. Permalink to comment#

    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. Permalink to comment#

    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. Permalink to comment#

    Nice site! It will be useful

  34. Raya
    Permalink to comment#

    Good idea indeed!

  35. Permalink to comment#

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

  36. surreal
    Permalink to comment#

    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. Permalink to comment#

    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. Permalink to comment#

    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. Permalink to comment#

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

  41. Permalink to comment#

    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.
    Permalink to comment#

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

  44. Permalink to comment#

    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.

    • Permalink to comment#

      Okay, thanks.

  45. sarah
    Permalink to comment#

    FANTASTIC!
    ..and he does it again!!

  46. andyjamesnelson
    Permalink to comment#

    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
    Permalink to comment#

    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.

*May or may not contain any actual "CSS" or "Tricks".