.NET Framework - Non-standard hanging indents

Asked By Hans-Georg Michna
18-Dec-07 11:50 AM
With today's browsers, is there any more elegant way than a
table to create hanging indents like these:

style="vertical-align: top">Text text text text text text text
text text text text text text text text text text text text text
text text text text text text text text text text.</td></tr>

style="vertical-align: top">Some other text text text text text
text text text text text text text text text text text text text
text text text text text text text text text text.</td></tr>

The <ol> tag comes to mind, but, as far as I know, its more
interesting attributes, like list-style-type, are poorly
supported.

Is there any way to enter the left part of a hanging indent
explicitly with every <li> item?

Hans-Georg
--
No mail, please.
Expression Web
(1)
WiseMS
(1)
PostID
(1)
ExpressionAuthor
(1)
AText
(1)
January
(1)
Webhttp
(1)
Georg
(1)
  Cheryl D Wise replied...
18-Dec-07 12:17 PM
You could try the pseudo element li:first-line
http://www.w3schools.com/css/pr_pseudo_first-line.asp

or pseudo element :first-letter for all pseudo elements see:
http://www.w3schools.com/css/css_pseudo_elements.asp

--
Cheryl D Wise
MS MVP Expression
Author: Foundations of Microsoft Expression Web
http://by-expression.com - win Expression Studio -see contest rules
http://forum.by-expression.com/forums/ShowThread.aspx?PostID=1070#1070

Registration now open for January classes at http://starttoweb.com
  Ian Haynes replied...
18-Dec-07 05:16 PM
Is the example here (see the second item, "Indenting the second and
subsequent lines of a paragraph") what you are after?

http://www.ew-resource.co.uk/css-links.aspx

HTH


--
Ian Haynes
MS MVP
http://www.ew-resource.co.uk
  Hans-Georg Michna replied...
19-Dec-07 07:04 AM
Ian,

thanks for the hint, but that's a pretty bad fake on the web
site. They propose this code:

Give the <p> tags a style:

.indent {
padding-left:25px;
text-indent:-25px;
}

Then they have adjusted the indent in the example such that it
looks almost as if it were properly typeset.

However, that is not a proper hanging indent. To do it
correctly, the beginning of the first text line, after the tag
that's sticking out on the left side, has to be aligned with the
left edge of subsequent lines. Otherwise it would look like
this:

A. Text text text text text text text text text text text text
text text text text text text text text text text text
text text text.

Hans-Georg
--
No mail, please.
  Hans-Georg Michna replied...
19-Dec-07 07:04 AM
Cheryl,

interesting, thanks! I think the :first-letter will come in
handy at times. I hadn't been aware of it.

Doesn't solve the hanging indent problem though, except in the
special case where the tags consist of exactly one character,
which is rare. In that case the following would work:

.hanging-indent { margin-left: 1.5em }
.hanging-indent:first-letter { float: left }


Strange that HTML is lacking a more complete hanging indent
function.

After some more thinking I found another solution with
float: left elements instead of a table, but it seems somewhat
awkward that way. Something like:


It works, and it looks a tad simpler than a table, but the table
has the advantage of automatic indent width determination.
Moreover those floats tend to go terribly wrong when something
else influences them. For example, it would go wrong if the
paragraphs already had a margin. This method requires
baby-sitting. A table is still the more resilient, but more
wordy solution.

Along the same lines, for a hanging indent we'd need something
like :first-word. Then the following would work:

p.hanging-indent { margin-left: 2em }
p.hanging-indent:first-word { float: left }

But we don't have that. And it would still fail if the tag
consists of more than one word, and it always needs manual
margin adjustment.

Any other idea that's more elegant than a table?

Hans-Georg
--
No mail, please.
  Ian Haynes replied...
19-Dec-07 07:51 AM
The indent hasn't been adjusted, that's what the .indent style gives.

You can adjust the pixel values to align correctly and give the amount of
indentation you need.


--
Ian Haynes
MS MVP
http://www.ew-resource.co.uk
  Hans-Georg Michna replied...
19-Dec-07 08:17 AM
Ian,

have a look at http://blog.michna.com/node/107#comment-182 ,
where I've put up an example.

The mistake is obvious here. The first word is not left-aligned
with the subsequent lines.

I actually tried a tab character instead of the space, but the
browsers don't understand that (as expected, actually---it was a
stupid test---they take all such characters as white space).

Hans-Georg
--
No mail, please.
  Ian Haynes replied...
19-Dec-07 09:18 AM
Can you clarify? Which are the words that should be aligned? 'Messages' and
'Nur' or 'Messages' and 'Time'?


--
Ian Haynes
MS MVP
http://www.ew-resource.co.uk
  Ian Haynes replied...
19-Dec-07 09:47 AM
We may not be talking about the same thing.

These are what I understand to be hanging indents, styled using the class
mentioned earlier.

http://www.ew-resource.co.uk/z-hanging-indent.htm


--
Ian Haynes
MS MVP
http://www.ew-resource.co.uk
  Hans-Georg Michna replied...
19-Dec-07 12:46 PM
Ian,

sure, I think we are. That page shows the problem clearly. In
the 20px example the left edge of the text is not properly lined
up. The first line sticks out to the left by one or two pixels.

But read the other messages, which contain the perfect solution
for a lot of lists, including those tagged with upper case
letters.

Hans-Georg
--
No mail, please.
  Hans-Georg Michna replied...
19-Dec-07 12:46 PM
Cheryl, that's a great hint. It works!

I even mentioned it, but for some reason believed that these
attributes are not supported. In truth the newer browsers
apparently all support it.

Thanks a lot; this solves most of of the hanging indent problem.
The rest are hanging indents with one or several words on the
left side. Guess those will remain in the realm of tables or
floating blocks.

Hans-Georg
--
No mail, please.
Create New Account
help
Dynamic Web Templates and multiple menus. . . Do i need multiple DWT .NET Framework Hi all. I'm making a website in expressionweb using xhtml and css. I have created a Dynamic Web Template (DWT) containing the layout of the site, and the horizontal main menu containing 7 additional side menu? Or is there another way of doing this? Any help much appreciated. Expression Web Designer Discussions Windows Server 2003 (1) Expression Web (1) ASP.NET (1) ExpressionTutorials (1) Cheshire (1) Hanscom (1) Albal (1) Addin (1) Is preference) or design time . Code snippet tutorial for adding design time initials at http: / / by-expression.com / quick-bits / includes / - - Cheryl D Wise MS MVP Expression Author: Foundations of Microsoft Expression Web http: / / by-expression.com mail list: http: / / groups.google
extensions being halted .NET Framework I just now received below from 1and1 host of my web sites. I have this oen line in my code for CSS what to do now no longer be available for download. FrontPage Server Extensions are programs that run on the web server to handle server side processing of components that are built into FrontPage, such as a list of hyperlinks * Style Sheet links to multiple files * Incorporating database access in a web * Enabling other Microsoft Office 2000 applications to save directly to a Web server * Hit Counters * Registration form handler * Search form * Discussion form handler * Confirmation Field Please See are to continue using some of the functions formerly available with FPSE. Jump to top Expression Web Designer Discussions Windows Server 2008 (1) Expression Web (1) Office (1) Vista (1) Linux (1) ASP.NET (1) MDAC (1) IIS (1) this
Best Way to Learn EW 3? .NET Framework I just got Expression Web 3. I am not a programmer and the last time I did any web design work was with FrontPage. Normally the best way for me to learn something new some other method of training that will help get me started? Thanks for any suggestions. Expression Web Designer Discussions C4C276D470D7808B4D4C47C8Content (1) SQL Express (1) Expression Web (1) ASP.NET (1) VWDExpress (1) SQLExpess (1) ForEW (1) HiI (1) I would choose is not out yet, however (should be in a week). The tutorials on the Microsoft expression site are also a good way to learn. And watch blogs from various Expression MVPs
Is expression web as easy as frontpage ? .NET Framework Hello I have made a few websites with frontpage the basics) so that I could constrcut a not too bad website quite quickly. Is expression web as simple for the none expert ? or does it take a long time to learn not an expert) ? Any hints and tips would be really good Thank you - - Alison Arulia Expression Web Designer Discussions QvCdnfGdq40JgLLVnZ2dnUVZ (1) LgZIq3VnZ2dnUVZ (1) HPRazVnZ2dnUVZ (1) Microsoft Word (1) Expression Web (1) Word 2003 (1) Office (1) Vista (1) There is a bit of a learning
wether it is a type or a value, this could be either of :- (type) unary_expression (expression) - expression particularly if a is a static field or member type then a might not be value needs to be enclosed in parentheses: (System.Int32) (-1) so (a) - 1 unambiguously matches (expression) - expression Tom Dacon thanks but I think it still is as, (int) -1 is valid becuase -1 is a unary-expression and so does not need parentheses it also compiles ok. I think the same confusion on whether a is a type or not. 1: ( type ) unary_expression = reduces to = > cast_expression 2: ( expression ) - multiplicative_expression = reduces to = > multiplicative_expression additive_operators multiplicative_expression = reduces to = > additive_expression the alternatives would be to output known. so output data from the parser which does not distinguish between cast_expression: ( type ) unary expression and expressions involving parenthesised expressions. however this makes it tricky when the expression continues further. the other alternative is to include two alternative paths in the output tree