(no subject)

[morwen]

Dear Lazyweb,

I would like to display some text in a web-browser that ends up looking like this:

Someone says "

The quick brown fox jumps over the lazy dog. Victor jagt zwölf Boxkämpfer quer über den Sylter Deich. Cwm fjord bank glyphs vext quiz. Buvez de ce whisky que le patron juge fameux."

Someone else says "

The quick brown fox jumps over the lazy dog. Victor jagt zwölf Boxkämpfer quer über den Sylter Deich. Cwm fjord bank glyphs vext quiz. Buvez de ce whisky que le patron juge fameux."

i.e. the indent on the second line is as far as it had got up to with the quote mark on the first line. I can do this in tables (see the source). I'd like not to. Is there a way of doing this with <div> and CSS? From my researches I can see no way, but I'm not an expert.

Comments

[pjc50.livejournal.com]

Damn CSS box model. I can't work out how to do this either. Most attempts are thwarted by the quoted paragraph auto-expanding its width.

[plexq.livejournal.com]

http://plexq.com/misc/wrap.html

If you are concerned about precision on a browser that has a font enlarge or reduce set, the javascript at the bottom takes care of that. It's not pretty, but it works.

I think there might potentially be another way by leveraging the box model, I'd have to experiment a bit more.

[abigailb.livejournal.com]

That's clever, but I'm not sure having javascript measure my text and reposition it appropriately is an improvement over just using tables.

[plexq.livejournal.com]

Didn't say it was an improvement! I've done some more digging, and I can't find another way to do it that doesn't suck. From what I've seen over the last few years, using divs and css to do anything with floating content just plain sucks, and often just doesn't work. When it comes to floating content that needs to dynamically resize, tables are still king.

You can do it if you are prepared to have a fixed height for the segment, but like I said, that sucks.

[psych0naut.livejournal.com]

Does the hanging indent always have to reach a specific character (i.e., the quote mark)? If not, then you can easily do this using a negative value for the text-indent property. Google "hanging indent css" for examples.

If the indent does have to reach a specific character, that sounds complicated. A good place to ask is comp.infosystems.www.authoring.stylesheets (news:comp.infosystems.www.authoring.stylesheets).

[abigailb.livejournal.com]

I'd like to reach a specific character. I'm aware of how to do it with a fixed width.

[thatmakesmemad.livejournal.com]

Just to sidetrack here but what's the opinion at work on Gareth Edwards claim to have done all the special effects for Monsters on a laptop at home ? Some smart alec on a forum is claiming those in the know know better and, when I suggested that they were accusing him of being a liar from a position of ignorance, claimed 10 years experience in the business (I suspect that's mostly in mobile phone games myself). Having seen the film I wouldn't say that the cgi looked that complicated. Only the Monsters were non stock models.

[abigailb.livejournal.com]

Is vaguely plausible. Haven't seen it yet, so can't comment on how good they look.

[aquarionical.livejournal.com]

Something like http://cenote.gkhs.net/~aquarion/abi.html ?

[abigailb.livejournal.com]

First version I saw was like the metaphorical goggles.

Current version is closer, but I want the indent amount to be based on the width of the introducing text: ie the quotes shouldn't line up. I shall amend my example to demonstrate this.

[aquarionical.livejournal.com]

Try now?

[abigailb.livejournal.com]

That appears to be it!

[abigailb.livejournal.com]

*pokes at the CSS* Aha. Thanks!

[pjc50.livejournal.com]

If you're using display:table, you might as well just use a table, surely?

[abigailb.livejournal.com]

I'd like there to be a stylesheet that doesn't do that, too, and not have to make structural changes to the HTML.