DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Design

Reply
 
Thread Tools Display Modes
Old 07-04-2007, 10:00 AM   #1
CarlSeiler
Member
 
CarlSeiler's Avatar
 
Join Date: Oct 2005
Location: Denton, TX
Posts: 271
Default Help with initial drop-cap

I'm trying to get rid of some white space that appears at the bottom of my drop cap of my initial paragraph.

While I realize that I should aim for pixel perfect layout, I think I should be able to get closer than I've gotten so far. I've tried negative bottom margins, and even negative padding (negative padding isn't allowed). I put up a sample page at http://overanalysis.org/junk/brewing1.html The CSS is at http://overanalysis.org/junk/brewingpage.css

Basically, I want the drop cap to go from the top of the top line to the bottom of the second line to mimic the style of Encyclopaedia Britannica 1st edition. When I make the font-size larger, it makes the third line indent to go around it, because there's white space at the bottom of the drop cap. 200% is about all I can do. But then I don't get the drop cap to go all the way to the bottom of the line. I've tried playing with line-height, too, but that doesn't seem to work when applied to a inline element like span.

I put a line around the drop cap B so you can see the white space. I'm also attaching copies of what I've got and what I sort of want (I just stretched the B down so it looks a little out of proportion and pixelly.

Any ideas?

Carl
P.S. The forum's upload kept failing, so I uploaded the files:
http://overanalysis.org/junk/What_Ive_Got.png
http://overanalysis.org/junk/What_I_Want.png
CarlSeiler is offline   Reply With Quote
Old 07-04-2007, 10:20 AM   #2
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default No attachments here

Quote:
Originally Posted by CarlSeiler View Post
P.S. The forum's upload kept failing, so I uploaded the files:
http://overanalysis.org/junk/What_Ive_Got.png
http://overanalysis.org/junk/What_I_Want.png
Carl,

We have a thread over in "How to use the forum" which says that the attachments are not working, following a change in hosting companies. KT is working on it, though.

David
dthomsen8 is offline   Reply With Quote
Old 07-04-2007, 11:32 AM   #3
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

Quote:
Originally Posted by CarlSeiler View Post
Any ideas?
I gave up trying to get something similar to work consistently. I'd like to know of a solution, too.

   
__________________
Kelvyn

Web site design, hosting and marketing, Keswick in the UK Lake District

If you are planning a visit to Keswick then try Keswick Tourist Information website

Kelvyn is offline   Reply With Quote
Old 07-04-2007, 03:28 PM   #4
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by CarlSeiler View Post
Basically, I want the drop cap to go from the top of the top line to the bottom of the second line to mimic the style of Encyclopaedia Britannica 1st edition. When I make the font-size larger, it makes the third line indent to go around it, because there's white space at the bottom of the drop cap. 200% is about all I can do. But then I don't get the drop cap to go all the way to the bottom of the line. I've tried playing with line-height, too, but that doesn't seem to work when applied to a inline element like span.
Without testing.... I'd try an approach like this:
  • float it left (that essentially will turn it into a block)
  • set top margin to get the top alignment you want
  • set height (or max-height) to limit the bottom to where you want it
  • set overflow:hidden so whatever is actually larger will drop out of view outside the bounding box
If it doesn't work it might give you some other ideas to play with...

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 07-04-2007, 06:19 PM   #5
CarlSeiler
Member
 
CarlSeiler's Avatar
 
Join Date: Oct 2005
Location: Denton, TX
Posts: 271
Default

Quote:
Originally Posted by iamback View Post
Without testing.... I'd try an approach like this:
  • float it left (that essentially will turn it into a block)
  • set top margin to get the top alignment you want
I did the first two. Then I started fiddling with the font size. I didn't do anything with:

Quote:
  • set height (or max-height) to limit the bottom to where you want it
And then I don't know anything about this one...

Quote:
  • set overflow:hidden so whatever is actually larger will drop out of view outside the bounding box
Is that in CSS2? I'm still using Lie and Bos 1st Edition. Looks like a trip to W3C site for me... Thanks. I'll let you know.

Carl
CarlSeiler is offline   Reply With Quote
Old 07-04-2007, 07:39 PM   #6
CarlSeiler
Member
 
CarlSeiler's Avatar
 
Join Date: Oct 2005
Location: Denton, TX
Posts: 271
Default

I don't know what I did, but something changed. I started playing with line-height and height, and nothing seemed to do anything. Then I changed the font size up to 275% and it looks great in Windows Firefox and pretty good in Opera (although I had some problems with it stumbling over the indentation on the first line, but I fixed that).

Windows IE 6.x never did get it quite right, and I found that it seems to ignore my body width anyway, and specifying the width using em's as I did really was a pain if IE won't use the body width correctly. Tried it under IE7 and got the same thing, so I'm surprised this wasn't fixed in 7. That's a whole 'nother story. I may have to try a container div.

Switching over to Linux, Firefox didn't do very well at all. I think that this might be because I don't have garamond or jgaramond on that machine. But strangely Konqueror did just fine! So that makes me wonder if there's something different in the way the Linux and Windows versions of Firefox work.

OK...been working on this. Looks halfway decent on most browsers now. Ended up using a container div to get the width right. Main problem in IE 6 and 7 is how they seem to handle the letter spacing (note the NG in the "BREWING." header and the LT in "MALT." which are supposed to be spread out...I'd stopped the span before the last letter to bring things close on the period).

The new versions can be found at http://overanalysis.org/junk/brewing2.html and http://overanalysis.org/junk/brewingpage2.css

Carl
CarlSeiler is offline   Reply With Quote
Old 07-05-2007, 12:09 PM   #7
roaryg
Member
 
Join Date: Aug 2006
Location: Ottawa, Canada
Posts: 176
Default

Quote:
Originally Posted by CarlSeiler View Post
I think that this might be because I don't have garamond or jgaramond on that machine.
And what about all the other viewers who don't happen to have garamond or jgaramond on their machine? Could be quite a few of them.

   
__________________
Tim.
roaryg is offline   Reply With Quote
Old 07-05-2007, 04:23 PM   #8
CarlSeiler
Member
 
CarlSeiler's Avatar
 
Join Date: Oct 2005
Location: Denton, TX
Posts: 271
Default

Well, I don't really know what's causing it, but the readability of the site is in no way hampered by not having the font. That's why I tested it on other machines. As always, I always test on ELinks and Lynx. Looks fine. Also looks fine when you turn off style sheets.

Carl
CarlSeiler is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
WordPress Initial Setup Andrew B. Web Site Building & Maintenance 2 01-19-2007 03:13 PM
Drop caps in Indesign hsannerh Print Design 2 01-04-2007 09:48 PM
Drop that cap marlene On Language & Literature 9 08-08-2006 06:48 AM
InDesignCS2 - Drop cap problem oldbunyip Print Design 3 04-27-2006 04:41 PM
css initial value Bo Aakerstrom Web Design 3 04-12-2006 02:56 PM


All times are GMT -8. The time now is 12:16 AM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.