Closed Bug 158037 Opened 22 years ago Closed 21 years ago

Floating first-letter affects later floating first-letter positioning

Categories

(Core :: Layout: Floats, defect, P3)

Product:
Core
Component:
Layout: Floats
Type:
defect

Tracking

()

Status:
RESOLVED INVALID
Milestone:
Future

People

(Reporter: bugzilla, Unassigned)

References

(
URL
)

Details

From Bugzilla Helper: User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.1a) Gecko/20020611 BuildID: 2002061104 Best case: An item rendered with CSS First-Letter style will have HTML after it ignored. In the URL provided above, only the first of three <p> elements are rendered. This can also be seen with the demo code at resource:///res/samples/test0.html Worst case: In a more complex page that I'm working on at http://icbar.ictinus.com/NewIndex.html the CSS First-Letter style causes Mozilla 1.1a to crash (I will added further crash info after submiting). Also, CSS First-Letter style causes the first letter to be rendered with excessive top and bottom spacing. Shouldn't the first letter be aligned with almost no top/bottom spacing? Reproducible: Always Steps to Reproduce: 1. Add the following to stylesheet: p.letter:first-letter { font-size: 36pt; font-weight: bold; float: left; color: rgb(56,92,102);} 2. Add class of "letter" to three consecutive <p> elements. 3. View in Mozilla 1.1a Actual Results: Only the first of the three <p> elements are rendered, and the first letter that is rendered has excessive top and bottom spacing. Expected Results: Mozilla should have rendered all three <p> elements with each first letter having no top or bottom spacing. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test CSS First-Letter</title> <style type="text/css"> p.letter:first-letter { font-size: 36pt; font-weight: bold; float: left; color: rgb(56,92,102);} </style> </head> <body> <div style="width: 300px"> <p class="letter">This is the first paragraph with large first letter. </p> <p class="letter">A second paragraph with large first letter</p> <p class="letter">Even a third!</p> </div> </body> </html>
The error message provided after a crash from viewing http://icbar.ictinus.com/NewIndex.html is as follows: Title: mozilla.exe - Application Error The instruction at "0x00000000" referenced memory at "0x00000000". The momory could not be "read". Click on OK to terminate the program Click on CANCEL to debug the program
This WFM in Win XP, Build 2002071708. ->Style System
Assignee: attinasi → dbaron
Component: Layout → Style System
QA Contact: petersen → ian
I have just grabbed a nightly build: 2002071708 Mozilla no longer crashes when viewing http://icbar.ictinus.com/NewIndex.html However, the vertical spacing added to the first letter is still an issue. When viewing http://icbar.ictinus.com/TestFirstLetter.html now you can see that it causes some indenting layout issues. i.e. the first letters in each of the three <p> elements are rendered nested under each other rather than flush with the left of the page. This is simply because of the vertical spacing added to the first letter.
Severity: critical → normal
layout.
Assignee: dbaron → attinasi
Status: UNCONFIRMED → NEW
Component: Style System → Layout
Ever confirmed: true
OS: Windows 2000 → All
QA Contact: ian → petersen
Hardware: PC → All
QA Contact: petersen → amar
Similar result using 1.1a build 2002061108 under Linux. Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.1a) Gecko/20020610 Try making both the first letter and the subsequent text the same but large - say 72pt, then revert to the subsequent text being a normal size. Then make the first letter one with a descender, compare the results. It appears the first letter spacing algorithm is allocating top and bottom space for the large font size, allowing space for a descender, which should not be needed if the first letter is always uppercase. (is it?)
Pete, Yes it looks like it is allowing space, top and bottom, as if it were part of a normal line of text. However, for first-letter style, I don't think any such spacing is required, even when a lower case character is used, because it is only ever 1 character and doesn't need to worry about anything but itself. If extra spacing is required around the first letter for aesthetic reasons the a padding style could be added by the page editor.
Concur. I think the example in the CSS2 spec http://www.w3.org/TR/REC-CSS2/selector.html#first-letter is more appealing visually. Note the top of the first letter is also marginally above the top of the adjacent uppercase letters. Note that if you specify a first character as a percentage - viz 500% - Mozilla allocates space by indenting the first five lines of text, but only grows the first letter so that the bottom of a hypothetical descender approaches the bottom of the space. Thus it looks much the same as specifying point size. The ideal (perhaps) is to grow the actual character until it approaches the bottom of the cell, but there is probably a difficulty in detecting the presence of a descender in all character sets. Perhaps leave the bottom as is unless text transform to uppercase style is in effect, when leave the same bottom space as the smaller text. Perhaps take the top up to line top of the smaller text first line plus 20%. It is currently marginally below. I played with the padding. It only appears to work with positive values, so you can't close up the gap with negative values. Anyway, I don't really like getting into this, your php fills up with 'if Mozilla padding = ' type of constructs that css is supposed to avoid. Sorry to ramble on... Pete.
The 'following HTML' appears OK in 1.1b, build 2002072204 for Linux Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.1b) Gecko/20020722 The spacing issue is as before (should this be assigned to a new bug?).
Priority: -- → P4
Target Milestone: --- → Future
Related to bug 150941?
*** Bug 150941 has been marked as a duplicate of this bug. ***
Summary: CSS first-letter style causing following html to be ignored, sometimes causing crash. → Floating first-letter affects later floating first-letter positioning
Whiteboard: invalid(?)
.
Assignee: attinasi → float
Component: Layout → Layout: Floats
Priority: P4 → --
QA Contact: amar → ian
Target Milestone: Future → ---
Priority: -- → P3
Target Milestone: --- → Future
There appears to be no bug here: no crash, and the float model is working as it should. (the indentation is actually proper, becuase the previous float dips into the next paragraph; a rule like p {clear: both} should be used)
-> INVALID Comment 12 is correct. Resize the text to 200% to see the difference.
Status: NEW → RESOLVED
Closed: 21 years ago
Resolution: --- → INVALID
Whiteboard: invalid(?)
You need to log in before you can comment on or make changes to this bug.