By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,835 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

Fancy First char...

P: n/a
Mel
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).

something like below where FFFs are the fancy first char

FFFFF fdafdfdsf fd afd fda fd fadf ds
FFF fdfd fasd fd fads fdasf dsaf
FFFFFFFFF fdafdfdsfdf fdsa fdsf adsf df a
fdsaf df adsf df ad fdas fdsf
fads fdsf dsa fds fdsf adsf
fdasf dsf d f
fd a fdsa fd fdas fds afd f ds

thanks
Mel
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Mel wrote:
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).

<!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#first-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 &amp; authoring! Bill Gates should care more for
standards.
</p>

</body>
</html>

Hope this helps.

--
Google Blogoscoped
http://blog.outer-court.com
Jul 20 '05 #2

P: n/a
"Philipp Lenssen" <in**@outer-court.com> wrote:
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.


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

Jul 20 '05 #3

P: n/a
Jukka K. Korpela wrote:
"Philipp Lenssen" <in**@outer-court.com> wrote:
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.


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?


I use <p class="firstParagraph"> 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
http://blog.outer-court.com
Jul 20 '05 #4

P: n/a
"Philipp Lenssen" <in**@outer-court.com> wrote
p:first-letter
{
font-size: 300%;
float: left;
font-weight: bold;
} [...] <p>The trusted <a
href="http://www.w3.org/TR/REC-CSS2/selector.html#first-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 &amp; authoring! Bill Gates should care more for
standards.
</p>


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)
Jul 20 '05 #5

P: n/a
On 24 May 2004 11:02:18 -0700, mp************@yahoo.com (Martha)
wrote:

[...]
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).


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

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

Nick

--
Nick Theodorakis
ni**************@hotmail.com
nicholas_theodorakis [at] urmc [dot] rochester [dot] edu
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.