Open
Bug 1414911
Opened 7 years ago
Updated 2 years ago
Orthogonal horizontal-tb <p> element with vertical margins set to 'auto' inside an vertical-rl <body> element
Categories
(Core :: Layout, defect, P3)
Core
Layout
Tracking
()
NEW
People
(Reporter: davidek251, Unassigned)
References
(Blocks 1 open bug)
Details
(Keywords: testcase)
Attachments
(1 file)
(deleted),
image/png
|
Details |
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0
Build ID: 20171106100122
Steps to reproduce:
I created a <p> element with css atributes writing-mode: tb-rl; inside a <div> element with align atribute set to center.
Actual results:
The <p> element wasn't in the center.
Expected results:
The <p> element should be in the center.
Updated•7 years ago
|
Component: Untriaged → Layout
Product: Firefox → Core
Updated•7 years ago
|
Priority: -- → P3
Comment 1•7 years ago
|
||
David,
align=center attribute specification is formally discouraged in HTML 4:
"
deprecated CENTER or align="center" CSS1 text-align: center; for in-line elements like text or image
deprecated CENTER or align="center" CSS1 margin-left: auto; margin-right: auto;
for block-level elements
"
https://developer.mozilla.org/en-US/docs/Using_Web_Standards_in_your_Web_Pages/Summary_of_Changes
"
text-align: center; centers inline content within a block. It does not (and should not) center the block box itself. A block is centered by setting its margin-left and margin-right to auto and its width to a value that makes the block narrower than its containing block.
"
https://developer.mozilla.org/en-US/docs/Mozilla/Mozilla_Web_Developer_FAQ#My_style_sheet_doesn.E2.80.99t_work.21_Why.3F
CSS Horizontal alignment: when to use margin-left, margin-right and when to use text-align
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/HorizontalAlignment.html
- - - - - - - -
align=center attribute specification is obsolete, deprecated in HTML 5:
"
HTML has none of the presentational attributes that were in HTML4 as their functions are better handled by CSS:
align attribute on caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.
"
https://html-differences.whatwg.org/#obsolete-attributes
- - - - - - - -
But there is a good news regarding your bug report. There is a failure in Firefox with regards to applying margins for an orthogonal block, as stated in the spec, section 7.3, in example 11 and figure 19:
"
Since auto margins are resolved consistent with the containing block’s writing mode, a box establishing an orthogonal flow can, once sized, be aligned or centered within its containing block just like other block-level boxes by using auto margins.
(...)
because the containing block is in a horizontal writing mode, (...) horizontal auto margins will expand to fill the containing block, (...)
"
7.3. Orthogonal Flows
https://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows
Here's a modified and adapted version of your test:
http://www.gtalbot.org/BugzillaSection/Bug1414911-orthog-vertical-p-with-horizontal-auto-margins.html
Chrome 54+ passes that test; Firefox all versions fail that test.
- - - - - - - -
Additional (basically the same as yours) tests :
http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/Orthogonal-flow-Example14-1.xht
http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/Orthogonal-flow-Example14-3.xht
You must download and install the Ahem font (AHEM____.TTF or ahem.ttf) available from
https://www.w3.org/Style/CSS/Test/Fonts/Ahem/
to try those 2 tests.
Chrome 54+ passes those 2 tests. Firefox all versions fail those 2 tests.
I never had a chance to finish those 2 tests and submit them to the CSS3 Writing modes test suite. I believe (I can not remember for sure) a buzilla bug report was *_not_* created for those tests. I need to check this now...
Comment 2•7 years ago
|
||
By the way, 'writing-mode: tb-rl' is the old property value and old declaration syntax and is only good for IE11. Edge 13+ supports 'writing-mode: vertical-rl' which is the standard syntax now.
Comment 3•7 years ago
|
||
I have modified the margin of the tested <p> with 'margin: 1em auto' so that we can check if margins collapse as expected at the same time.
I create an orthogonal horizontal <p> test:
http://www.gtalbot.org/BugzillaSection/Bug1414911-orthog-horiz-p-with-vertical-auto-margins.html
- - - - - - - - -
Margin collapsing occur as expected in both tests for Firefox 52.5 ESR and for Chromium 62.0.3202.89.
Firefox 52.5 ESR fails both tests as far as rendering 'auto' margins and centering a block's block size within its orthogonal containing block.
Chromium 62.0.3202.89 passes both tests.
- - - - - - - - -
Marking as blocking bug 1079125
- - - - - - - - -
I will create at least 4 tests and will submit them into the CSS3 Writing modes test suite eventually.
Blocks: 1079125
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: testcase
OS: Unspecified → All
Hardware: Unspecified → All
Summary: When I create a <p> element with css atributes writing-mode: tb-rl; and the <p> element is in <div> element with align atribute set to center, then the <p> element is not in the center. → Orthogonal horizontal-tb <p> element with vertical margins set to 'auto' inside an vertical-rl <body> element
Version: 58 Branch → Trunk
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•