?

Log in

No account? Create an account

Abi

Previous Entry Share Next Entry
09:00 am:

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

[User Picture]
From:pjc50
Date:December 7th, 2010 09:49 am (UTC)
(Link)
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.
[User Picture]
From:plexq
Date:December 7th, 2010 10:26 am (UTC)
(Link)
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.


Edited at 2010-12-07 10:27 am (UTC)
[User Picture]
From:abigailb
Date:December 7th, 2010 11:04 am (UTC)
(Link)
That's clever, but I'm not sure having javascript measure my text and reposition it appropriately is an improvement over just using tables.
[User Picture]
From:plexq
Date:December 7th, 2010 11:17 am (UTC)
(Link)
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.
[User Picture]
From:psych0naut
Date:December 7th, 2010 10:42 am (UTC)
(Link)

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.

[User Picture]
From:abigailb
Date:December 7th, 2010 10:50 am (UTC)
(Link)
I'd like to reach a specific character. I'm aware of how to do it with a fixed width.
From:thatmakesmemad
Date:December 7th, 2010 10:46 am (UTC)
(Link)
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.
[User Picture]
From:abigailb
Date:December 7th, 2010 12:00 pm (UTC)
(Link)
Is vaguely plausible. Haven't seen it yet, so can't comment on how good they look.
(no subject) - (Anonymous)
[User Picture]
From:abigailb
Date:December 7th, 2010 12:47 pm (UTC)
(Link)
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.
(no subject) - (Anonymous)
[User Picture]
From:abigailb
Date:December 7th, 2010 01:00 pm (UTC)
(Link)
That appears to be it!
[User Picture]
From:abigailb
Date:December 7th, 2010 01:11 pm (UTC)
(Link)
*pokes at the CSS* Aha. Thanks!
[User Picture]
From:pjc50
Date:December 7th, 2010 01:31 pm (UTC)
(Link)
If you're using display:table, you might as well just use a table, surely?
[User Picture]
From:abigailb
Date:December 7th, 2010 01:35 pm (UTC)
(Link)
I'd like there to be a stylesheet that doesn't do that, too, and not have to make structural changes to the HTML.
Powered by LiveJournal.com