HTML in Talk & Profiles

Important: Please close all html tags before the end of your message - unclosed tags carry on to the following messages. If you don't know what I mean by 'closing html tags' then please don't use them. Note added at sunny's request.
I ran a quick test to see which html tags seem to be supported.
In TalkThere's a pretty wide range including

• <h1> <h2> . . .
• <p>
• <br />
• <hr />
• <i> and <em>
• <b> and <strong>
• <code> and <pre>
• <ol> and <ul> (Note 1)
• <img> and <a> (Note 2)
• <blockquote>
• <div> and <span>
• most (all?) html entities (Note 3)

In Your ProfileThe list is much shorter.

• <i>
• <code><bold> and <strong>
• <img> and <a>

CSSCSS appears to be well supported and you can add style attributes to most tags. But because the <p>, <span> and <div> tags aren't supported in Your Profile you are limited to what you can achieve there.
Notes:

1. The default is no bullet, so you need to add one with css e.g. <ul style="list-style-type:square; list-style-position:inside;">
2. You must use double quotes " " round attribute values, single quotes do not work
3. But notice that HTML entities are not preserved through editing so keep a back up copy of your text if you use them and expect to re-edit the message
4. All new lines can create new paragraphs so spacing is a bit tricky, best write with the minimum of extra breaks.

PS: updated 7 Oct 2006 : corrected entry on Your Profile and fixed broken tags (in order to show tags they have to be entered in part as entities like &lt;p> but these aren't preserved and have to be fixed up every time you edit the message!

PPS: Sunny and I established that the tag closing behaviour differs between IE & FireFox - no surprise there then ;-(

Here's the code to add book covers into Your Profile. You'll need to find the URL of the cover picture you want to use, the easy way to do this is to right click on the cover image in your catalogue (or anywhere else in LibraryThing) and select "Copy Image Location" in FireFox or "Properties" and copy the URL in IE6.
<img src="http://images.amazon.com/images/P/006074748X.01._SX50_SCMZZZZZZZ_.jpg" />


If you want to add a link to the books home page then you need a longer piece of code. Oh, and you need the link from the book's page, the PermaLink from the bottom left hand corner of the page is the best, go to it, right click and select "Copy link location" in FireFox or "Copy Shortcut" in IE6. The code now has two links in it, one for the page and one for the image:
<a href="http://www.librarything.com/catalog.php?work=18342&book=851568 "><img src="http://images.amazon.com/images/P/006074748X.01._SX50_SCMZZZZZZZ_.jpg" /></a>


If you want more than one cover image then you just repeat the code more than once with the appropriate urls in it. Here's one with two images (I've just put the images without links to make it a bit simpler). The URL for the second image looks different because it is a user-uploaded cover image from LibraryThing:
<img src="http://images.amazon.com/images/P/006074748X.01._SX50_SCMZZZZZZZ_.jpg" /> <img src="http://www.librarything.com/covers/4052177-m.jpg" />


As you see, we have two covers but they are not very elegant, in this case one book is actually larger than the other but you can't tell from the image size. So lets tidy up our images a bit with a little magic css styling. We'll set the height to be 80 pixels and put a 1 pixel black border round each image. The code to do this is style="height:80px; border:1px solid black;" and it goes inside our 'img' tag. We'll also add a space between each image so they aren't quite so cramped.
<img style="height:80px; border:1px solid black;" src="http://images.amazon.com/images/P/006074748X.01._SX50_SCMZZZZZZZ_.jpg" /> <img style="height:80px; border:1px solid black;" src="http://www.librarything.com/covers/4052177-m.jpg" />


The last version here - just for completeness is the code with the links included, it looks complex but if you follow through the steps above you can easily see where each piece comes from:
<a href="http://www.librarything.com/catalog.php?work=18342 "><img style="height:80px; border:1px solid black;" src="http://images.amazon.com/images/P/006074748X.01._SX50_SCMZZZZZZZ_.jpg" /></a> <a href="http://www.librarything.com/catalog.php?work=18342 "><img style="height:80px; border:1px solid black;" src="http://www.librarything.com/covers/4052177-m.jpg" /></a>

It is important that you close the HTML tags you're using in your posts. Otherwise they continue to the next message. This post itself is an example: the font is continued from message 1!

The broken tags in Message 1 are now fixed (see the PS and PPS) so you probably won't see the font error that Sunny mentions.

I still see it, though; the whole thread is in courier since 'In Talk', point 7 " and pre". Did reload (didn't empty cache or cookies).

. . . trying again??? <code> doesn't seem to want to stick - though probably it's just me.

_now_ it's fixed, thank you :-)


(Safari, Mac OS X)

Sometimes, I 've been adding a message to a thread--a technical support message, that is--just to close someone else's tags.

Messing around with tags, it's a good idea not to leave your waste to others.

Then again, it might be a good idea LT 'd put each and every single message in a proper container tag, thus enclosing the message and making each and every waste effect is stopped at the end of the (crappy) message--at least.