The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Hanging indents with specified line breaks?
Woody20
post Jan 28 2012, 09:37 PM
Post #1


Novice
**

Group: Members
Posts: 27
Joined: 11-March 11
Member No.: 14,105



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

Hang: First line
      Second line
      Third line

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 28 2012, 11:01 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,026
Joined: 9-August 06
Member No.: 6



You can use a negative text-indent.

The padding on body is just to create space for the negative indent.
CODE
body     { padding-left: 5em }
p        { text-indent: -2.5em }


HTML
<p>
Hang: First line<br>
Second line<br>
Third line</p>


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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Woody20
post Jan 29 2012, 01:43 AM
Post #3


Novice
**

Group: Members
Posts: 27
Joined: 11-March 11
Member No.: 14,105



QUOTE(pandy @ Jan 28 2012, 11:01 PM) *

You can use a negative text-indent.

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 29 2012, 09:23 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,026
Joined: 9-August 06
Member No.: 6



Why can't you set the linebreaks where you want? Because of long lines and wrapping? You can stop that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 29 2012, 09:41 AM
Post #5


.
********

Group: WDG Moderators
Posts: 7,919
Joined: 10-August 06
Member No.: 7



Or you could use a list:

CODE
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}

li {
padding: 0;
margin-left: 2em;
}

li:first-child {margin-left: 0;}
</style>

<ul>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 29 2012, 09:47 AM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,026
Joined: 9-August 06
Member No.: 6



I don't see what a list does that a negative indent doesn't. What am I missing now?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 29 2012, 10:48 AM
Post #7


.
********

Group: WDG Moderators
Posts: 7,919
Joined: 10-August 06
Member No.: 7



Just thought the HTML structure might be better than BRs.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 29 2012, 11:52 AM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,026
Joined: 9-August 06
Member No.: 6



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? smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 29 2012, 03:20 PM
Post #9


.
********

Group: WDG Moderators
Posts: 7,919
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Jan 29 2012, 05:52 PM) *

IF it is a structural list, sure. I didn't get the impression it was though.

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...

QUOTE
Vad heter "av två onda ting" på engelska? smile.gif

The lesser of two evils?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Woody20
post Jan 29 2012, 04:16 PM
Post #10


Novice
**

Group: Members
Posts: 27
Joined: 11-March 11
Member No.: 14,105



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 29 2012, 07:04 PM
Post #11


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,026
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 29 2012, 10:59 PM
Post #12


.
********

Group: WDG Moderators
Posts: 7,919
Joined: 10-August 06
Member No.: 7



QUOTE(Woody20 @ Jan 29 2012, 10:16 PM) *

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.

Actually, in definition lists the default styling in common browsers is to indent the DD elements but not the DT ones:

CODE
<dl>
<dt>name</dt>
<dd>value</dd>
<dd>value</dd>
</dl>


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-conten...#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.)


QUOTE
I was hoping for something simple, like a tab character.

Tabs work with preformatted text (like the PRE element), but accessibility and semantics become less good that way.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 20th October 2018 - 11:52 AM