473,387 Members | 1,510 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Fancy First char...

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
5 5145
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
"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
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
"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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: pw | last post by:
Hi, We need a Gantt chart type calendar for Access 97 (and soon, Access 2003). We need it to list the days of the month (for a date range) going horizontally across the top, the names of the...
1
by: Jacky Luk | last post by:
How can I put fancy seperators between menu items in VC++.NET? Thanks Jack
6
by: Peter Rothenbuecher | last post by:
Hello, when I try to compile the following code with g++ -o client client.c #include<sys/socket.h> #include<stdio.h> #include<stdlib.h> #define ADDRESS "mysocket"; #define MAXLEN 200;
3
by: snow.carriers | last post by:
Let me first state that I'm using Borland Turbo C++, it's relatively old so the new string methods won't work. Anyways, first I'm trying to collect a line of a string (with numbers, letters,...
0
by: comboytw | last post by:
Hi all, I'm developing a VOIP application in wince 5.0 which supports rich features like video conferencing, media player, FM radio, etc. I found there is a VOIP template called "TUI" and I may...
4
by: =?Utf-8?B?cm9nZXJfMjc=?= | last post by:
hey, I have a method that takes a char array of 10. I have a char array of 30. how do I make it send the first 10, then the next 10, then the final 10 ? I need help with my looping skills....
8
by: mast2as | last post by:
I almost apologize to ask this question but I have been starting at this code for a bit of time and don't understand what's wrong with it. I am not arguing about the fact it's good or not coding,...
3
by: cs | last post by:
Hi, I'm new to C and would appreciate any feedback on the following program, asplit, which splits a file into 2 new files, putting a certain number of lines in the first file, and all the rest...
6
by: neovantage | last post by:
Hey all, i have installed Uber uploader on my server. and it is working perfectly. It shows progress bar after submitting form. I want that when i upload an image or a file it shows the progress in...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.