How to indent a line after <br />

[tintagel]

Hi everyone, I've just joined your group!

I'm pretty new to HTML etc. Here's my problem:

I'm attached to the idea of keeping content separate from formatting
information, so I like putting content in a .xml document and then
making a stylesheet for it.

At the moment I'm working on a lot of prose-style text, and having to
enclose everything in double-sided <xyz></xyz> tags in order to get any
kind of indentation between blocks is not so convenient. This is
especially true when formatting dialogue in fiction, where you need
line breaks and indentation for lots of very short, consecutive lines
of text.

The approach I'm currently pursuing is to put an emtpy node called <br
/> in the .xml source where I need a line break, and then use .xsl and
..css stylesheets to instuct the browser to interpret this as "do a line
break, but indent the first character of the next line".

The only way to do this that I've currently found is a rather inelegant
'cheat' using the zero width non-joiner &zwnj; (*), thus
(extracting from the stylesheet):

<xsl:template match="br">
<br />
<span id="indent">&zwnj;</span>
</xsl:template>

where "indent" pads on the left by 1em.

(De-confuser: the matched "br" is the empty node that lives in the .xml
source.)

This works o.k., and doesn't upset the "text-align: justify" which is
in effect throughout the document (and which for example, if I
substitute the <span></span> expression with &emsp, leaves the indented
text misaligned as the space character is factored into the
justification). I guess it's an o.k. work-around, but it's still a
misuse of an entity (&zwnj;), which can't be good practice and leaves a
bitter taste in the mouth.

Is there a way of achieving the same result in a more concrete manner
using CSS? Or is there a safer 'placeholder entity' I can use instead
of &zwnj; to put inside the <span> so it actually indents the following
character? A crucial consideration here seems to be the justified text,
and how to avoid mucking it up.

I'd really appreciate any advice on this!

Best wishes,

T.

[Andy Dingley]

tintagel wrote:

I'm attached to the idea of keeping content separate from formatting
information, so I like putting content in a .xml document and then
making a stylesheet for it.
Don't overdo this.

- Don't expect CSS to be an adequate stylesheet language for this.
You'll need XSLT if you want duplication, ordering, attribute
generation and a whole lot more.

- You'll need a DTD to specify the XML you use to represent your
content. If your content is "publications for the web", then XHTML is a
reasonable DTD to use (Can you see where I'm leading here?)

HTML / XHTML is a useless DTD for document semantics, but it's not
actually that bad for text formatting - or at least formatting hooks
sufficient to attach CSS formatting rules onto.

The only way to do this that I've currently found is a rather inelegant
'cheat' using the zero width non-joiner &zwnj; (*), thus
(extracting from the stylesheet):

Use the CSS text-indent property
http://www.w3.org/TR/CSS21/text.html#indentation-prop
You don't have to hack on the web. Pretty much everything works these
days (if you ignore M$oft getting it wrong). If you're having to build
ugly hacks, then chances are you're doing it wrongly.

[Manuel Collado]

tintagel escribió:

...
The approach I'm currently pursuing is to put an emtpy node called <br
/> in the .xml source where I need a line break, and then use .xsl and
.css stylesheets to instuct the browser to interpret this as "do a line
break, but indent the first character of the next line".
...
Is there a way of achieving the same result in a more concrete manner
using CSS? ...

In the CSS:

br + * { text-indent: 1em }

(not tested, but should work)
--
To reply by e-mail, please remove the extra dot
in the given address: m.collado -> mcollado

[tintagel]

Hi Andy,

Thanks for the advice. The indentation property only applies to block
elements, not inline ones like <br />. But I'll bear your advice in
mind.

T

[tintagel]

Hi Manuel,

Thanks for the advice. I don't quite understand the syntax in your
suggestion. What does the '+*' in the CSS declaration do?

Cheers,

T

[David Dorward]

Manuel Collado wrote:

br + * { text-indent: 1em }

(not tested, but should work)

No, it shouldn't. Since it will match the next element, not the text
immediately following the element.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[David Dorward]

tintagel wrote:

Thanks for the advice.
What advice? http://www.safalra.com/special/googlegroupsreply/
I don't quite understand the syntax in your
suggestion. What does the '+*' in the CSS declaration do?

+ adjacent sibling

* any element

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[David Dorward]

tintagel wrote:

The approach I'm currently pursuing is to put an emtpy node called <br
/> in the .xml source where I need a line break, and then use .xsl and
.css stylesheets to instuct the browser to interpret this as "do a line
break, but indent the first character of the next line".

Browsers are really geared up for indentation of blocks (and the first line
of blocks), not lines. From your description of your content, it sounds
like you should be organising your content into multiple logical blocks
(e.g. paragraphs), and not a single logical block with line breaks in it.

Then you can just use the text-indent property to acheive the effect you
want.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[David Dorward]

David Dorward wrote:

Manuel Collado wrote:

br + * { text-indent: 1em }

No, it shouldn't. Since it will match the next element, not the text
immediately following the element.

.... and only applies to elements that are display: block.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is