Fancy First char...

**Philipp Lenssen** · Jul 20 '05, 06:52 PM

Re: Fancy First char...

Mel wrote:
[color=blue]
> i want to have a block, like some articles i see, with the first char
> (very Fancy and huge) and have the rest of the
> block kind of wrap around this char (to the right of).
>[/color]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css" media="screen, print, projection">

/* This should be an external CSS file, put here for
sample purposes */

body
{
margin-right: 30%;
font-family: garamond, arial, helvetica, sans-serif;
}

h1
{
border-bottom: 2px dotted black;
}

p:first-letter
{
font-size: 300%;
float: left;
font-weight: bold;
}

</style>
</head>
<body>

<h1>Standards in the Real World</h1>

<p>The trusted <a
href="http://www.w3.org/TR/REC-CSS2/selector.html#f irst-child">W3.org</a[color=blue]
>[/color]
allows one to use the first-letter pseudo-selector in CSS to e.g.
increase the size of the first letter of a paragraph. And then there's
browser implementations , which vary. E.g. Internet Explorer 6 makes it
hard to apply this to just the first paragraph of a document thanks to
its broken CSS selector syntax implementation. Shame on Microsoft for
not being able to fix their rendering engine for the last few years, as
it hurts web authors & authoring! Bill Gates should care more for
standards.
</p>

</body>
</html>

Hope this helps.

--
Google Blogoscoped

Google Blogoscoped

http://blog.outer-court.com

A daily news blog and community covering Google, search, and technology.

**Jukka K. Korpela** · Jul 20 '05, 06:52 PM

Re: Fancy First char...

"Philipp Lenssen" <info@outer-court.com> wrote:
[color=blue]
> E.g. Internet Explorer 6 makes it
> hard to apply this to just the first paragraph of a document thanks to
> its broken CSS selector syntax implementation.[/color]

Are you serious? How much does it take to write
<p class="first-paragraph">
(for a _single paragraph_ in a document) instead of
<p>
in HTML, and
p.first-paragraph:first-letter
instead of
body > p:first-child:first-letter
in CSS? Actually, the latter won't work if there's an intervening markup
level, probably a <div>. Actually, I don't know how to universally refer
to the first paragraph of a document using CSS 2 selectors, except by
using a class or id attribute or similar tool.

(You can replace first-paragraph by f, for example, if you don't want to
use mnemonic class names.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

**Philipp Lenssen** · Jul 20 '05, 06:53 PM

Re: Fancy First char...

Jukka K. Korpela wrote:
[color=blue]
> "Philipp Lenssen" <info@outer-court.com> wrote:
>[color=green]
> > E.g. Internet Explorer 6 makes it
> > hard to apply this to just the first paragraph of a document thanks
> > to its broken CSS selector syntax implementation.[/color]
>
> Are you serious? How much does it take to write
> <p class="first-paragraph">
> (for a _single paragraph_ in a document) instead of
> <p>
> in HTML, and
> p.first-paragraph:first-letter
> instead of
> body > p:first-child:first-letter
> in CSS?[/color]

I use <p class="firstPar agraph"> in Authorama.com. Authorama has around
60,000 pages. (No I did not write all those manually.) I also use
"firstParagraph " in my daily blog posts (see below) and it makes my
template a bit weird. The "firstParagraph " is one more detail that
makes the HTML harder to produce and not as simple as possible -- and
all because IE is broken. Well, even the font-tag was not that hard to
write, it was just plain annoying.

And what if I have a site which is completely CSS based and all and I
want to add a first-letter effect? Of course, then I need to adjust the
template (if it exists), which sort of trashes the whole CSS idea.

--
Google Blogoscoped

Google Blogoscoped

http://blog.outer-court.com

A daily news blog and community covering Google, search, and technology.

**Martha** · Jul 20 '05, 06:54 PM

Re: Fancy First char...

"Philipp Lenssen" <info@outer-court.com> wrote[color=blue]
> p:first-letter
> {
> font-size: 300%;
> float: left;
> font-weight: bold;
> }[/color]
[...][color=blue]
> <p>The trusted <a
> href="http://www.w3.org/TR/REC-CSS2/selector.html#f irst-child">
> W3.org</a>
> allows one to use the first-letter pseudo-selector in CSS to e.g.
> increase the size of the first letter of a paragraph. And then there's
> browser implementations , which vary. E.g. Internet Explorer 6 makes it
> hard to apply this to just the first paragraph of a document thanks to
> its broken CSS selector syntax implementation. Shame on Microsoft for
> not being able to fix their rendering engine for the last few years, as
> it hurts web authors & authoring! Bill Gates should care more for
> standards.
> </p>[/color]

Last I looked, all Gecko-based browsers horribly mangle the spacing
around a :first-letter. Your 3x size floated-left T would have acres
of space below it and would just look wrong without some negative
margins and/or padding (hard-coded to the font size you set).

Compared to that, IE's <p class="first"> is very, very, very minor.
(And there's the added part where sometimes, I want fancy first
letters on paragraphs *other* than the first one. So I wouldn't be
relying on insanely complicated CSS inheritance rules, no matter
what.)

If this has been fixed in newer versions of Fire[insert animal du
jour], please let me know.

--
Martha
(don't google to email)

**Nick Theodorakis** · Jul 20 '05, 06:54 PM

Re: Fancy First char...

On 24 May 2004 11:02:18 -0700, mpalotaygoogle@ yahoo.com (Martha)
wrote:

[...]
[color=blue]
>Last I looked, all Gecko-based browsers horribly mangle the spacing
>around a :first-letter. Your 3x size floated-left T would have acres
>of space below it and would just look wrong without some negative
>margins and/or padding (hard-coded to the font size you set).[/color]

I think Gecko may be particularly bad when the first-letter is
floated, at least when I was trying to make it work. I've been playing
with first-letter by making only a modest increase in size, and
setting its baseline to the bottom of the line. Mozilla seems to
display it fine, at least to my artistically-untrained eye. See:

<http://theodorakis.net/astroblog.html>
or
<http://theodorakis.net/blockcenter.htm l>

for examples (adjacent-sibling selectors are used, so IE probably
won't play).

Nick

--
Nick Theodorakis
nick_theodoraki s@hotmail.com
nicholas_theodo rakis [at] urmc [dot] rochester [dot] edu

Fancy First char...

Fancy First char...

Comment

Comment

Comment

Comment

Comment