Footnotes with a twist

Getting it to appear directly next to the relevant point is a somewhat impossible problem…. I’m in the midst of a site redesign, trying out similar things for floating images outside of the text, and it’s got serious issues. Generally for RSS you’d want to process it differently, or at the least set it up for RSS, and then use CSS on the regular webpage to ‘hide’ bits and pieces and format it the way you want…

The best you can do is try to float it (rather than just absolute positioning it, which takes it out of the text flow). That’ll keep it basically in-position, though you may find you want the footnote to actually appear somewhat before the actual occurrance for CSS positioning to work well (which breaks rss…). At least with floats, you can have each one push itself below a prior one, so they don’t overlap.

Sidebars wouldn’t work, as obviously you need to make things line up — you can’t guarantee that without having the text ‘floated’ or positioned out via CSS.

However, a completely different approach would be to have javascript that processes the page, finds a particular css tag (footnote), and makes hover-popups for the footnote information. That’d likely work well.

-d

Thanks David, I was afraid of that. I tried using preg_replace (as suggested by another helpful WP user who posts here) to take out all the footnote css tags in my RSS feeds. I’m not sure I did it correctly though, and like you said the problem of overlapping still remains.

I’ll look out for a javascript solution, though I prefer not to use javascripts if I can get away with it.

Thanks for your input.

css class tags shouldn’t really ‘mean’ anything inside of the html encoded content of an RSS feed… you shouldn’t have to do anything. but I’d have to see the results…

you can also do the popup thing purely in CSS. search around the css-tricks sites, you’ll certainly see examples.

-d

Yes the footnotes do show up as plain text in RSS feeds, but I’d rather cut them out completely, so they don’t show.

I’ll definitely look around for css tricks – thanks for the hint.

Ahhhh. I thought you WANTED them in the feeds! ??

Your best bet then is likely something programmatic (PHP) for either inserting them into HTML content, or removing them from RSS content — depending which way you’d like to work it.

Depending on the complexity of the footnotes (i.e., do they have ANY html within them?), you could easily write code to find the marking div and ‘cut it out’ of the content body for the RSS processing.

The footnotes did have some html in them. I used preg_replace to remove them, and this worked when I tested it on a page, but I wasn’t sure where to put the code to apply it to RSS feeds… Still, the page could still be messy in IE. Do you know how I might get the footnotes to display as inline elements but still outside of the paragraph flow? That is, how would I get the footnotes to show beside a word which is mid-paragraph without breaking the sentence up with line breaks? I tried display: inline; but it didn’t seem to do the trick.

I’m beginning to warm to Daring Fireball’s more conventional method, but I’ll hold out for a while.

He has an interesting approach, certainly worth thinking about. You could also list them in a sidebar. wouldn’t necessarily ever ‘line up’, but they’d be there.

Again, I’d have to see a test page to get an idea in FF and IE of the problems you’re encountering. If you want to float the element, I think by definition that means it is a block. But there are tricks to make an element that doesn’t take up space in the paragraph flow (that I’ve seen, but never tried).

This plugin basically does what the daring fireball example does. Might be worth checking out.

Thanks. I can’t provide a link right now, but I think I’m on the right track. I’ve found some examples I like and am trying to make sense of the code:)

Thanks again for all your help.

Thanks miklb – will do:)