The letter
Here's a technical question that I'm hoping a savvy reader can answer for me. When I write in italics on my blog, using the regular margins I have set up for the main (center) column, if the first letter in the line is a small "p," the "tail" of the character gets cut off. I suspect that my margins and my padding are somehow out of sync in my CSS stylesheet, but let's be real -- I don't know my CSS from my ASS. My stylesheet is a stock Movable Type stylesheet that I edited extensively by trial and error to get to where it is today. There's all sorts of stuff in there that I don't know what it does (if anything).
Anyway, does anybody know what's causing the "p-tails" to be "chopped off"? How I can fix it? What extra junk I can do away with in that stylesheet so that I can actually figure out what it all does?
UPDATE, 12:58 p.m.: I believe we have a fix, thanks to reader David B. Wright's helpful suggestions:
| Posted at 8:45 AM | Permalink |
|
Comments (4)
It's not "p-tails" that are being cut off. The "p" in "hot spot" is just fine.
What is happening is that the tail of the "p" in this case extends to the left *outside the render area*, and so is truncated.
You might be able to fix it by upping a margin value somewhere to increase the size of the render area by a few pixels on the left side. I'm no CSS expert either, but I'm pretty sure that's the direction you want to be looking anyway. :-)
Posted by Derek | January 3, 2007 10:04 AM
You should avoid "p" ing in the left margin, especially if Portland Police are nearby.
Posted by Bark Munster | January 3, 2007 10:28 AM
Jack,
You might want to play with adding a "padding-left" clause and see if that helps. I'd start with maybe "padding-left: 2px;" (no quotes, of course) and go up from there if needed.
Keep in mind that where there are multiple definitions in the same CSS file, the last one in the file takes precedence over previous definitions. So you usually want to start at the end of the file and work backwards to find the correct section to change.
I'd start with the section around line 431 in your CSS file, the block for ".entry-content" etc. Notice that you currently have a "margin: 0" in that block. Between playing with that margin property, and adding a padding property, I expect you'll be able to get a good, healthy "p" out of the deal. ;-)
Posted by David Wright | January 3, 2007 11:55 AM
FYI: the "tail" on the lowercase "p" is called the descender. Interestingly, you only lose the italic descender when it occurs on the flush left margin (and not when it's in the middle of the line).
It must be some genetic problem, perhaps caused by subliminal Tram-o-phobia!
Posted by oregbear | January 3, 2007 2:47 PM