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/