Re: [css-d] Drop Caps
At 11:14 PM 1/21/2009 +0100, Gunlaug Sørtun wrote: FWIW: the basic layouts on my private site... http://www.gunlaug.no/contents/wd_additions_26.html ...are just overbuilt and overstyled versions of negative margins... http://www.alistapart.com/articles/negativemargins Once you've understood how negative margins work, such layouts are relatively easy to create and work with. A different approach for achieving pretty much the same look/feel and cross-media flexibility can be found here... http://www.gunlaug.no/contents/template-080929.html ...and the HTML/CSS is definitely simpler and should be easier to understand. Haven't tuned it or added full support for older browsers to it yet though, since it's just a proof of concept example. Interesting -- thanks, Georg! Lots to consider... lots to learn... at least I won't be bored for the next couple of years! Ron :) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop Caps
Firstly, thanks for your reply, Holly -- and also thanks to Jen, too, for the tip (in a separate message) on the book to look for At 11:59 AM 1/19/2009 -0600, Holly Bergevin wrote: As with most things CSS, you'll need to test the effect you want in the environment it's going to be placed. Oh, and in a variety of browsers as well to see if the results are acceptable to you. Actually, I had already done that before I even posted my question, tested out different variations of the drop cap style that I'd gotten from the wiki site for this list, and also ran my page through Browsershots and tried it out in 40+ browsers -- it seemed to work okay for the most part, except for a couple of browsers where things went a little bit haywire (I forget which browsers, but I think they were less popular ones, so if things go funny for, like, 0.01% of my visitors, well, that's too bad, but I suppose I could live with that). it is doubtful that the author would suggest padding in ex units at this time I seem to recall a fairly recent thread here on that subject -- in fact, I saved a bunch of font-related posts, so I should go through them (again) and see what they had to say about that (again). On a similar note, for all these many years (ever since I first implemented CSS on my sites) I've had my base font size set at 14px, because that was -- apparently -- what tons of research said was the best way to go, at least at *that* time (years ago). From the aforementioned recent thread it would seem not to be the way to go, though, and so now I've been re-thinking how to do up the font sizing on my site. Argh. That's a discussion for a separate thread, though, of course (if there's anything further to discuss, that is). Another page that may give you an example is - http://www.gunlaug.no/contents/wd_additions_04.html Nicely laid out page, Georg (assuming you're reading this)! As an old table layout guy (for the time being, at least), when I look at the source code for pages like yours, though, I find that I'm just utterly mystified, it's hard for me to make head or tail of how you did certain things -- but that'll all come in time, I suppose. :/ The nature of web pages and browsers is not static like print, and there are a variety of variables that can come into play on any given page. If you don't like the look of the padding, take it out, or adjust it until you do like it. That's one of the beautiful parts of CSS That may be what's beautiful about it, but it's also what worries me about it -- that is, whether what I create today (which might seem to work well enough cross-browser/platform) will still work tomorrow, whenever some new browser version (or new browser!) comes out. Good luck, Ron, and keep experimenting. I think that's part of it, too -- I don't want to spend all my time experimenting, I really just want to get things published, over and done with. I wish one didn't have to experiment and test practically everything -- I wish things were developed enough already that there was just simply tried-and-true ways to do certain things, so that one could just do them and not have to worry about them, whether they look/work okay (and will continue to do so for the long haul). Maybe, at middle-age (but sometimes feeling more like a senior!), I'm just getting too old for this. Ah, if only I could have what I know now, but could be a teenager once again... Ron :/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop Caps
Ron Koster wrote: Another page that may give you an example is - http://www.gunlaug.no/contents/wd_additions_04.html Nicely laid out page, Georg (assuming you're reading this)! As an old table layout guy (for the time being, at least), when I look at the source code for pages like yours, though, I find that I'm just utterly mystified, it's hard for me to make head or tail of how you did certain things -- but that'll all come in time, I suppose. :/ FWIW: the basic layouts on my private site... http://www.gunlaug.no/contents/wd_additions_26.html ...are just overbuilt and overstyled versions of negative margins... http://www.alistapart.com/articles/negativemargins Once you've understood how negative margins work, such layouts are relatively easy to create and work with. A different approach for achieving pretty much the same look/feel and cross-media flexibility can be found here... http://www.gunlaug.no/contents/template-080929.html ...and the HTML/CSS is definitely simpler and should be easier to understand. Haven't tuned it or added full support for older browsers to it yet though, since it's just a proof of concept example. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop Caps
At 08:43 PM 1/18/2009 -0500, Bill Brown wrote:
I'm just leading horses to the Kool-Aid...I can't make 'em drink it.
Okay, apparently I didn't explain my questions well enough, it would seem.
Once again, on this page...
http://css-discuss.incutio.com/?page=DropCaps
...is the following recommended way to do up dropcaps...
p:first-letter {
font: 2.5em/80% serif;
float: left;
padding: 0.2ex 0 0 0.2ex;
margin: 0;
overflow: visible;
}
Now, like I said, I'm not sure if there's a specific reason for that
padding. If I'm confused about that, it's only because so often I've
seen replies (to other problems) go by on this list, where the
solution has been Oh, you just have to add some padding, otherwise
it won't display correctly in such-and-such a browser (or whatever
similar response. I find it strange that the above recommendation has
that padding added, in fact, because to me -- being the nit-picky
typographer that I am -- it looks a bit weird, it pushes the dropcap
just a teensy little bit over. I could see indenting a first line
(for aesthetic reasons), say, 14px or somoething, but to just push it
over a mere 0.2ex makes it look more like an error than anything intentional.
So is that padding there for a reason? If not, then can that whole
line (for the padding) just simply be deleted? On the other hand, if
so, then does it have to be 0.2ex, or can it not be changed to indent
the first line even more -- or, indeed, even have negative indenting
and have the dropcap hanging outside the paragraph, in the margin?
That could be cool, too, actually.
Similarly, the recommendation of...
font: 2.5em/80% serif;
...is given, but I don't know if for some reason those values are the
magic number, arrived at through years of testing and stuff. See,
that web page basically says here's how to do it, but then doesn't
say but you can change the values to whatever you want -- let alone
does it explain what the reasons were for coming up with those values
in the first place (or, for example, why padding is part of the
recommendation).
As usual, pardon my ignorance, but I can only assume that someone
here made that page, so surely someone here knows?
Thanks again, in advance!
Ron :)
Woof?... http://www.Psymon.com
Ach, du Leni!... http://www.Riefenstahl.org
Hmm... http://www.Imaginary-Friend.ca
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop Caps
From: Ron Koster r...@psymon.com
http://css-discuss.incutio.com/?page=DropCaps
...is the following recommended way to do up dropcaps...
Ron,
As with most things CSS, you'll need to test the effect you want in the
environment it's going to be placed. Oh, and in a variety of browsers as well
to see if the results are acceptable to you.
The wiki page you have cited was written before 2004 and apparently has not
been edited since. In my opinion, it is doubtful that the author would suggest
padding in ex units at this time, but I don't know. Douglas Livingstone was a
contributer to this list, but I haven't seen him post for some time, so you
might try emailing him and ask him the question directly.
douglas-ts...@redmelon.net (I have no idea if that will work or not, it's from
his oldish test site index page.)
You can search the archives of css-d from the following link to find more
discussions (including the current one) on drop caps.
http://archivist.incutio.com/viewlist/css-discuss/
Another page that may give you an example is -
http://www.gunlaug.no/contents/wd_additions_04.html
The selector for the drop caps on that page -
html body div #content div div.icon p:first-letter {
float: left;
color: #579;
background: transparent;
padding: 0 .1em 0 0;
font-size: 3.2em;
line-height: 0.7em;
margin: .02em -.06em -.2em;
}
We all have to test for the look we desire, and settle on what works best for
the given situation. I don't think anyone will say you *must* use a certain
amount of padding for every situation, even the author of the wiki page you
cited. The nature of web pages and browsers is not static like print, and there
are a variety of variables that can come into play on any given page. If you
don't like the look of the padding, take it out, or adjust it until you do like
it. That's one of the beautiful parts of CSS
As an aside, the wiki has been written over the years, by a number of different
people who posted for a time on css-d and may or may not still be around
answering questions or even lurking. There is no one specifically assigned to
maintain it with the most up-to-date methods, so you may indeed find something
that is out-of-date to current best practices. Feel free to edit a page
yourself if that is the case, adding what worked for you.
The wiki is, or should be, dynamic, not static, and is not meant to be
unchanging. CSS itself changes, as does support for any given level of CSS.
Best practice is all well and good, until it doesn't work in a given
situation. In my opinion, all CSS examples, whether in the wiki or in the
wild on the net are open to experimentation, and indeed problably should be
experimented with so that the user/developer understands what various
adjustments can and will do.
Good luck, Ron, and keep experimenting.
~holly
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Drop Caps
One of the issues that I've been having is with drop caps, and in
looking for a solution I found this page...
http://css-discuss.incutio.com/?page=DropCaps
...which recommends this code...
p:first-letter {
font: 2.5em/80% serif;
float: left;
padding: 0.2ex 0 0 0.2ex;
margin: 0;
overflow: visible;
}
It seems to work great (although I have yet to test in different
browsers/platforms) and I'm hoping that will resolve the issue I was
having (which had to do with the line height screwing up), but I
don't know the history behind how this recommendation was arrived at,
and so I'm just wondering if there's a particular reason why...
a) 2.5em/80% is specified (ideally, for my own purposes, I'd like to
change that to 2.6em/38%); and
b) if there's a specific reason for the padding: 0.2ex 0 0 0.2ex;
i.e. is there some reason why those couldn't just be all set to 0,
or, alternatively, why I couldn't indent the first letter (and, in
effect, the first line) a certain number of *px* (not ex)?
Thanks in advance!
Ron :)
Woof?... http://www.Psymon.com
Ach, du Leni!... http://www.Riefenstahl.org
Hmm... http://www.Imaginary-Friend.ca
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop Caps
Ron Koster wrote:
http://css-discuss.incutio.com/?page=DropCaps
p:first-letter {
font: 2.5em/80% serif;
float: left;
padding: 0.2ex 0 0 0.2ex;
margin: 0;
overflow: visible;
}
and so I'm just wondering if there's a particular reason why...
a) 2.5em/80% is specified (ideally, for my own purposes, I'd like to
change that to 2.6em/38%); and
2.5em is the size of the font in relation to the parent element. In your
example, the first letter of every paragraph on the page would be 2.5
times the height of the font of the paragraph.
80% is the line-height, which does not require a unit, so I usually
write it in decimal form (.8 in this case).
b) if there's a specific reason for the padding: 0.2ex 0 0 0.2ex;
i.e. is there some reason why those couldn't just be all set to 0,
or, alternatively, why I couldn't indent the first letter (and, in
effect, the first line) a certain number of *px* (not ex)?
Try it:
http://www.w3schools.com/css/tryit.asp?filename=trycss_font
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.com
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop Caps
At 08:09 PM 1/18/2009 -0500, Bill Brown wrote: 2.5em is the size of the font in relation to the parent element. In your example, the first letter of every paragraph on the page would be 2.5 times the height of the font of the paragraph. 80% is the line-height, which does not require a unit, so I usually write it in decimal form (.8 in this case). b) if there's a specific reason for the padding: 0.2ex 0 0 0.2ex; i.e. is there some reason why those couldn't just be all set to 0, or, alternatively, why I couldn't indent the first letter (and, in effect, the first line) a certain number of *px* (not ex)? Try it: http://www.w3schools.com/css/tryit.asp?filename=trycss_font Oh, I realize that it *works* and that one can change the various values (I've already tried it) but since that specific bunch of styling was recommended, I just don't know what the reasons for that recommendation were -- like, if I change it from what's recommended at that page... http://css-discuss.incutio.com/?page=DropCaps ...will it break in some browser or other? For one thing, for example, I'm not sure why extra padding is needed (or suggested) on two sides of the drop cap. Ron :? __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop Caps
Ron Koster wrote: ...will it break in some browser or other? For one thing, for example, I'm not sure why extra padding is needed (or suggested) on two sides of the drop cap. Ron, I'm just leading horses to the Kool-Aid...I can't make 'em drink it. -- !-- ! Bill Brown macnim...@gmail.com ! Web Developologist, WebDevelopedia.com -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
