Printable Version of Topic

Posted by: Woody20 Jan 28 2012, 09:37 PM

Is there is simple way to do hanging indents with specified line breaks, in HTML 4.01?

The intent is that everything has a left margin > 0, except the first line, and the start of each line is aligned.
I know this can be done with a table, but that's more complicated than I'm looking for.
Using + and - text-indents and <br> and the end of each line doesn't work.

Posted by: pandy Jan 28 2012, 11:01 PM

You can use a negative text-indent.

The padding on body is just to create space for the negative indent.

The problem is if you want exactly the first word to stick out and the rest of the first line to be aligned with the lines below. You can get there with trial and error for a certain font and for a known text, but if you plan to do this for many paragraphs it would be tricky.

If you just want the first line to stick out a certain amount it will work fine.

Posted by: Woody20 Jan 29 2012, 01:43 AM

As I said, I tried this method initially, but it doesn't allow you to set the line breaks where you want. The "trial-and-error" method doesn't work either, since users can vary the screen width, or font size. And even if it did work, you'd have to redo everything if you changed the text at all.

Posted by: pandy Jan 29 2012, 09:23 AM

Why can't you set the linebreaks where you want? Because of long lines and wrapping? You can stop that.

Posted by: Christian J Jan 29 2012, 09:41 AM

Or you could use a list:

Posted by: pandy Jan 29 2012, 09:47 AM

I don't see what a list does that a negative indent doesn't. What am I missing now?

Posted by: Christian J Jan 29 2012, 10:48 AM

Just thought the HTML structure might be better than BRs.

Posted by: pandy Jan 29 2012, 11:52 AM

IF it is a structural list, sure. I didn't get the impression it was though. Don't use tables for layout, use lists instead? Vad heter "av två onda ting" på engelska?

Posted by: Christian J Jan 29 2012, 03:20 PM

Separate lines of text sounds like list items to me (maybe with the exception of poems, song lyrics and similar). But only the OP knows...


The lesser of two evils?

Posted by: Woody20 Jan 29 2012, 04:16 PM

If you will look at the example I provided, you can see it is list-like; I control the line breaks, not the HTML interpreter. Typically, lines are short, and do not wrap, but it is possible to have longer lines. In any case, only the initial line will have the hanging indent.
The proposed list solution looks like it should work, but it's complicated, and, as written, changes all <ul>. Then we need a separate class, more complication. I was hoping for something simple, like a tab character.

Posted by: pandy Jan 29 2012, 07:04 PM

No such thing.

What works with a list also works with a negative indentions. Use the method that's appropriate for the content. If your problem is wrapping lines, stop them from wrapping.
http://www.w3.org/TR/CSS2/text.html#propdef-white-space

Posted by: Christian J Jan 29 2012, 10:59 PM

Actually, in http://www.htmlhelp.com/reference/html40/lists/dl.html the default styling in common browsers is to indent the DD elements but not the DT ones:



Can't say if this fits your content structurally/semantically. Generally it's frowned upon using structurally/semantically unsuitable HTML elements just for presentational effects (that's what CSS is for), but the description of definition lists is pretty flexible:
http://www.w3.org/TR/html401/struct/lists.html#edef-DL
http://www.w3.org/TR/html5/grouping-content.html#the-dl-element

(Side-note: http://www.blooberry.com/indexdot/html/tagpages/d/dl.htm advices against using multiple DDs with a single DT, but I don't see any support for that in the specs.)



Tabs work with preformatted text (like the PRE element), but accessibility and semantics become less good that way.