negative indent for paragraph

[Xah Lee]

is there a way to do negative indent for paragraphs, as in a dialogues?
(i.e. in Microsoft word, drag the top margin triangle to the left,
bottom to the right, then press tab after each person's name)

here's a rather a hack after some 20 minutes diddling.

<style type="text/css">
p.dg {margin-top:5px; margin-bottom:5px;}
</style>

<div style="backgrou nd-color:yellow; padding:1ex;">
<div style="text-indent:-7ex; margin-left:7ex;">
<p class="dg">Ursu la: Have we got a deal?</p>
<p class="dg">Arie l: If I become human, I'll never be with my father or
sisters again.</p>
<p class="dg">Ursu la: But you'll have your man. Life's full of tough
choices, isn't? Oh — and there is one more thing. We haven't
discussed the subject of payment.</p>
<p class="dg">Arie l: But I don't have any —</p>
<p class="dg">Ursu la: I'm not asking much. Just a token, really, a
trifle. What I want from you is... your voice.</p>
<p class="dg">Arie l: But without my voice, how can I —</p>
<p class="dg">Ursu la: You'll have your looks! Your pretty face! And
don't underestimate the importance of body language! Ha!</p>
</div>
</div>

Xah
xah@xahlee.org
∑ http://xahlee.org/

[Els]

Re: negative indent for paragraph

Xah Lee wrote:
[color=blue]
> is there a way to do negative indent for paragraphs, as in a dialogues?
> (i.e. in Microsoft word, drag the top margin triangle to the left,
> bottom to the right, then press tab after each person's name)
>
> here's a rather a hack after some 20 minutes diddling.[/color]

I've never tried to do something like that, but it looks like a decent
method to me. Have you tried it cross browser?
[color=blue]
> <style type="text/css">
> p.dg {margin-top:5px; margin-bottom:5px;}
> </style>
>
> <div style="backgrou nd-color:yellow; padding:1ex;">
> <div style="text-indent:-7ex; margin-left:7ex;">
> <p class="dg">Ursu la: Have we got a deal?</p>
> <p class="dg">Arie l: If I become human, I'll never be with my father or
> sisters again.</p>
> <p class="dg">Ursu la: But you'll have your man. Life's full of tough
> choices, isn't? Oh — and there is one more thing. We haven't
> discussed the subject of payment.</p>
> <p class="dg">Arie l: But I don't have any —</p>
> <p class="dg">Ursu la: I'm not asking much. Just a token, really, a
> trifle. What I want from you is... your voice.</p>
> <p class="dg">Arie l: But without my voice, how can I —</p>
> <p class="dg">Ursu la: You'll have your looks! Your pretty face! And
> don't underestimate the importance of body language! Ha!</p>
> </div>
> </div>[/color]

There is no need for those classes on the <p> elements.
Just transfer that inline style to the stylesheet, using a class, and
refer to the p elements thus:
div.dg{text-indent:-7ex; margin-left:7ex;}
div.dg p{margin-top:5px; margin-bottom:5px;}

A lot less code if you have many of those dialogues too.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Flash And The Pan - Midnight Man

[Els]

Re: negative indent for paragraph

Els wrote:
[color=blue]
> Xah Lee wrote:
>[color=green]
>> is there a way to do negative indent for paragraphs, as in a dialogues?
>> (i.e. in Microsoft word, drag the top margin triangle to the left,
>> bottom to the right, then press tab after each person's name)
>>
>> here's a rather a hack after some 20 minutes diddling.[/color]
>
> I've never tried to do something like that, but it looks like a decent
> method to me. Have you tried it cross browser?
>[color=green]
>> <style type="text/css">
>> p.dg {margin-top:5px; margin-bottom:5px;}
>> </style>
>>
>> <div style="backgrou nd-color:yellow; padding:1ex;">
>> <div style="text-indent:-7ex; margin-left:7ex;">
>> <p class="dg">Ursu la: Have we got a deal?</p>
>> <p class="dg">Arie l: If I become human, I'll never be with my father or
>> sisters again.</p>
>> <p class="dg">Ursu la: But you'll have your man. Life's full of tough
>> choices, isn't? Oh — and there is one more thing. We haven't
>> discussed the subject of payment.</p>
>> <p class="dg">Arie l: But I don't have any —</p>
>> <p class="dg">Ursu la: I'm not asking much. Just a token, really, a
>> trifle. What I want from you is... your voice.</p>
>> <p class="dg">Arie l: But without my voice, how can I —</p>
>> <p class="dg">Ursu la: You'll have your looks! Your pretty face! And
>> don't underestimate the importance of body language! Ha!</p>
>> </div>
>> </div>[/color]
>
> There is no need for those classes on the <p> elements.
> Just transfer that inline style[/color]
*on the div*. that inline style on the containing div I meant :\[color=blue]
> to the stylesheet, using a class, and
> refer to the p elements thus:
> div.dg{text-indent:-7ex; margin-left:7ex;}
> div.dg p{margin-top:5px; margin-bottom:5px;}
>
> A lot less code if you have many of those dialogues too.[/color]


--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Falco - Jeanny