HTML tips

I'm working on creating an HTML tips page for HelpThing (I was surprised there wasn't one already, at least in the wiki!) so that it can be linked to from various appropriate places, such as the Talk help page, and probably also profiles and maybe reviews.

Some things I could use help with:
- Are there places other than your profile, reviews, and Talk that allow html?
- Is the same html allowable in all places?
- Am I missing any html that works? So far I have included: bolding, italicizing, striking, blockquoting, images, resizing images, and links.
- Are there other HelpThing pages that would benefit from a link to this resource?
- Does anyone know how (if?) one can 'smoosh' an image in wiki so that I can show an example of what changing both the height and width would look like? The html markup for images doesn't work there and I can't seem to get it to do anything to mess with the aspect ratio.

I hear a rumor that lists work, too.

• So I'm trying one

1. In fact, I'm trying two!


How very strange. Unordered lists do not work, but ordered lists do. Anyone have insight?

you missed underline

Actually, in the linking section I'd advise against putting in the whole URL. Specifically, if you link to this thread as http://www.librarything.com/topic/82095 and someone clicks on that link from the German site (www.librarything.de) they will find themselves on the English site. If, instead, you just put a link like http:/topic/82095 then they will stay on the German site. (That's a single slash after the colon.)

I'm not sure if this works with everything though, but it certainly does with links to talk topics, and author pages, and works and books.

Testing Wiki link: http:/wiki/index.php/HelpThing:Html_tips. Yup, works fine.

Note that this does not work with auto linkification, you do have to use the full <a href= syntax. E.g. just pasting "http://www.librarything.com/topic/82095" into a talk message works fine, but "http:/topic/82095" doesn't.

> 3 Huh, I didn't know that!

Maybe I'll add a section under linking - 'linking tips' or some such - that can mention that, since many links are actually for off-site, and then it'd need the full URL.

Such a subsection could also include some information on how to find permanent links to catalog views, reviews, talk posts, etc.

Would you be willing to swing by and describe that over there, since I don't really know what I'm talking about, and you seem to?

Note to self (or anyone else who wants to edit):

- Also should add how to do , and square brackets so they show up in Talk.

>5 Aerrin99: square brackets so they show up in Talk.

On Noisy's profile page:
http://www.librarything.com/profile/Noisy
the have:

The [ (left square bracket) symbol can be generated in a post using "& # x 0 0 5 B ;" or "& # 0 0 9 1 ; " . The ] (right square bracket) symbol can be generated in a post using "& # x 0 0 5 D;" or "& # 0 0 9 3 ;"

Edited to try to make it work...to get the symbol you type the string between the " " but leave out the " and the spaces.

PS - if you edit your post you have to enter them again, kind of like touchstones.

Haha, as evidenced by my lack of > and < above. That's annoying! Thanks for the tip. I'll try to remember to add them tomorrow, if no one else gets there before me.

Added alternatives 'strong' for 'b' and 'em' for 'i'.

And here is a discussion started by Tim about what is and isn't allowed now.

Testing

According to Chuck Musciano and Bill Kennedy, the HTML cite tag actually exists!

eta: Well, it may do, but it don't work in Talk!

Testing

This text has
been formatted using
 the HTML pre tag. The brower should
 display all white space
as it was entered.

eta: Not exactly, more than one space is compressed to one space.

Testing

I didn't know strike could be just an 's'

eta: It's not, it's the whole word 'strike'. I'll fix this on the wiki.

Testing

Underline me, baby!

eta: added to wiki.

Awesome!

It looks like, from that discussion, that ul ought to be working, too. I've added the special characters section.

It's also supposed to recognize things that look like links as links (Test: http://www.google.com). It appears that this works some of the time (most of the time?), but I've definitely seen it not work for longer URLs recently. I'll put this in the wiki.

Left to do:

* Check over my image coding - I'm not sure my resizing is actually accurately portrayed
* Try to get the wiki image to smoosh as an html'ed 100x100 image would
* Do profile testing to be sure all these work there
* Figure out where in the catalog these work. It looks like more than just reviews - comments and private comment fields? Anywhere else?

I've been going around to the various appropriate helpthing pages and creating a link back to this page, but other eyes on this would be really helpful!

In the bit about resizing images, you might want to mention that a large image that's resized in the img tag is still a large image, and doesn't take any less bandwidth or time to download and display. It makes more sense in many ways to resize the image before uploading it.

Good thought - added!

Also added using images as links.

14
Yes, it very much depends on the original source (src) of the image. Photographs that I have taken myself, I source from my flickr†, but I only upload lo-res, 600px long side images to filckr. Copyright-free‡ images that I find on the web and that are relevant to either Talk or WikiThing, I download to my own computer then resize and either upload to my flickr or to LT's wiki image area. Uploading to LT would only be done if it were an image that would only be relevant (to me) on LT.

† Large images sourced from flickr via their 'All Sizes' feature are re-sampled/re-sized from the flickr farm before they are sent to your browser.

‡ And I use no other sort!

I just want to test if styles work in Talk (which I am thinking they don't):

Let's see if I can change colors.

And in a blockquote instead.

ETA: evidently not.

Nope styles were something that Tim explicitly mentioned as not allowed. For a while whenever someone used the word style in a post it was replaced with the word forbidden.

'Makes this thread a favourite so that he can see if there's anything to learn.'

>3 r.orrison:

Internal links work if you drop the whole of the first part within a <a> construction, including the http bit, so /topic/nnnn#messageheadnn will get you to the same place for any site.

I don't think you can get from here to WikiThing that way though, Noisy.

Hang on...

with full URI

from /wiki

mising one slash, w3 lt and com

Here goes.

eta: Well paint me purple and call me a grape! They all work.
eta again: I just noticed that FireFox shows the same full URI in each case in the status bar.

The third one doesn't work in Safari.

But the third one is missing two slashes. Does this work:
http:///wiki/index.php/Collections

The only Safari installation I've got is on my iPod Touch, and you're right, the third one (h tml:/ wiki/ etc without the spaces) does not work. Hmmm.

22
I just checked by editing that the third example in my #20 has one slash between the colon and the w of wiki.

I just checked your three slash version on Safari on my iTouch and it failed as well.

Right - it fails for me too.

25
I just now thought of clicking on your triple slash line at #22 here in FF on my laptop (my general purpose 'puter that I use on LT all the time) and it failed as well. Triple slashes might not be the way to go? ;)

I also tried 2 slashes. So 1 works, but only on Firefox, but 2 and 3 do not. Maybe it's time to read the documentation.

Dear Group,

In a different group, in a different post, I asked about a sandbox
in which I could try out my HTML experiments without "bothering the neighbours".

Does anyone know if this is on the cards? Or is there one?

Yours, Guido.

Typo.

HTML isn't a specifically LibraryThing technology so I don't see why you'd expect there to be a sandbox on this site. I did a google search on HTML sandbox and it looks like there are lots of sites out there that already offer this functionality.

28: I've searched through Talk here and on Google (ETA using Google to search LT Talk), and I can't find a reference to the html sandbox, so I'm not quite sure what that was. What kind of experiments do you want to do? If it's just to practice using html in talk posts, you could start your own group - even a private one - and practice html in posts in that group.

PS - with the proviso that only some html code is permitted in talk posts, to prevent spamming. The basics are all permitted: bold, italics, etc.

Thanks mate, rsterling, I was thinking about just that, ie. setting up MY own group, but then I would probably NOT get any interaction/feedback/some one telling me I am a complete Idiot/"discussion".

I wanted to experiment with a "Roll over tag on an image which points to a link"
I first noted it in a post. I contacted the "poster" and looked it up in LT WIKI.

I now just have to play with the HTML.

Guido.

PS. #29. There are some quite local HTML restrictions inside LT. Thus a
sandbox inside LT might make some sense :-)

Start a sandbox thread in off-topic then.

Thanks, Done.

You might want to add in something about margins, in case someone wants to put a line of images on their profile page. It doesn't work in Talk (because the style tag is not allowed), but it can be used on the profile.

I have a line of three images of recently read on my profile with a margin between them.

To get the margin:

<img style="margin-right:10px;" src="IMG SRC" height=200>

The img style tag works on profiles, although I believe none of the text style will work.

To prevent LT from truncating the display of urls or reallyreallyreallyreallyreallyreallyreallylongrunonwords, you can randomly insert </i> in the letter string to force the display of the whole thing. (Or you could use </u> or </b>, etc.)

I refer to this site when I need to remind myself what the code is for a special character.

The truncation of urls is a feature. If you need to see the whole url hover the mouse over it and you should see it on the bottom line of your browser. Please don't encourage people to disable this feature.

>37 jjwilson61: Why?

I'm not saying disable it all the time, just as, by telling people how to use <b> </b>, I'm not saying one should type in bold all the time. There are times, however, when it is useful to know how to do either.

For example, it makes it easier to explain how to use the LT-supported covers in "Cover Thing" when I can show the full address for explanation.

To say: As your image source, use http://www.librarything.com/coverthing_dynamic.php?book=51829167&width=50 , replacing the book number with your own book number and width with your desired width doesn't help that many people when I'm trying to explain it to them.

But if I can say: As your image source, use http:⁄⁄www.librarything.com/coverthing_dynamic.php?book=51829167&width=50, replacing the book number with your own book number and width with your desired width, it makes much more sense.

Your explanation of your truncated link works fine for me because if I hover my mouse over the link I see the whole link beautifully at the bottom of my browser. And there's a reason that long strings are truncated which is that they can cause pages to get stretched horizontally making some people with lower resolution monitors to have to scroll back and forth to be able to read every message in the thread. That's much more of a pain than a truncated url.

This sums it up for me, we don't have to write HTML code, we get to!



Courtesy (or possibly not, I didn't ask) of Not Invented Here, a great new(-ish) webcomic.

eta: Should have mentioned, in case anyone doesn't know, this is the same team that brings us Unshelved, a great library-based webcomic.

>40 justjim: this is the same team that brings us Unshelved

Part of it. :)

Unshelved is by Bill Barnes and Gene Ambaum. Not Invented Here is by Bill Barnes and Paul Southworth.

Uh, yeah. Sorry. ;)

Sorry about the width earlier as well. Tyop in the img tag.

HTML question - How do you write a comment and then hide it so the reader has to click on something to reveal the text - for example, to hide spoilers

On LibraryThing, you can use the <spoiler> tag, e.g.:

innocuous text <spoiler>hidden text</spoiler> innocuous text

comes out as:

innocuous text hidden text innocuous text

Thank you! I knew it was much simpler than the toggle gobbledy gook I was finding that still didn't quite work!