- From: Philippe Verdy via GitHub <sysbot+gh@w3.org>
- Date: Fri, 28 Jun 2019 01:07:27 +0000
- To: public-css-archive@w3.org
Note that the main use for this feature is when the inner box has a distinct background and borders (because they remain sized and aligned according to the parent's content-box), so these backgrounds and borders will appear "under" (partially masked) or worse "through" the float (when the float is transparent or semi-transparent: the content of the float itself becomes unreadable, polluted by the content in fact placed after it). Note also that when this feature is enabled and the computed min-width+borders for the inner box does not fit in the remaining space not already occupied by floats, then the inner box will clear automatically below the float. That inner box is still not a float by itself, it may have its own inner floats. And the inner box which has been automatically "cleared down" will have to respect and collapse its top margin with the bottom margin of the left float. As well the shortcut notation for margins can still be used for the innerbox: margin: 0.5em 2em+0.5em; means that there's: - a top margin of 0.5em with any prior content in the parent box, or with any prior left or right float below which the inner box was placed. - a bottom margin of 0.5erm with any further content in the parent box, or with any further left or right float which may follow the inner box - a minimum left or right margin of 2em (where floats may be placed), but if there are floats positioned inside the parent's content-box, ouside these margins, then the inner box will have an extra left of right margin of 0.5em in addition to the floats' border+margin The value "+0.5em" may be written "+0" when only the floats margins matter (generally floats define their own margins with the content placed round them) or with their "relative" parent top and bottom content box) or just "+" With a single value for the margins of the inner box: margin: 2px+0.5em; Here the inner box just defines 2px of margins on all sides, but in case of floats present, these margins are extended to 0.5em with these floats to the left, right, top or bottom. Le ven. 28 juin 2019 à 02:37, Philippe Verdy <verdy_p@wanadoo.fr> a écrit : > I need to make a "graphic" to present the problem because you don't > understand. > > |<----------PAGE WIDTH------------------->| > | : : | > |< MARGIN >:< CONTENT BOX >:<MARGIN>| > | : TEXT HERE... : | > | +-------+ ...TEXT HERE: | > | | INNER +-------------| | > | | LEFT | INNER | | > | | FLOAT | CONTENT BOX| | > | +-------+ | | > | : | | | > | : +-------------+ | > | : : | > > Here I want to be able to size the new inner box according to the position > of the inner float. I don't want the inner content box to flow "around it" > (not even below it, it must remain to the right of it so that all left > floats will be in the left margin of the inner box, which remains > rectangular. Its width is then autojusted (reduced) as long as its > "min-width" is kept. > But if this is not the case, the inner box will "clear" vertically to go > to just below the float, and then will use the full width of the parent > content box: > > > |<----------PAGE WIDTH------------------->| > | : : | > |< MARGIN >:< CONTENT BOX >:<MARGIN>| > | : TEXT HERE... : | > | +-------+ ...TEXT HERE: | > | | INNER | | | > | | LEFT | cleared | | > | | FLOAT | | | > | +-------+-------------+ | > | | INNER CONTENT BOX | | > | +---------------------+ | > | : : | > > This makes easy to insert floats any where before, and ensures that the > innerbox will never "wrap" around them (e.g. with their border or > background). > All I need is a way to specify that the inner box will not overlap any > float (left floats can continue flowing to the left as long they fit in the > left margin of the inner box). So I need a way to specify that the > left-margin inner box will never include any space used by the float, and > that the inner box will remain either completely to the right of left > float, or fully below it. > Visually, this creates the minimum "clear" space, and we don't have to > depend on the presence of absence of any prior float. > And the inner contenet box will still have a suitable minimum width, that > can be increased if needed to cover the whole width of the parent content > box. We don't need to size the inner content box, and we don't have to know > which margin to use (which would be useless if there are in fact no floats > before). > > What I describe is just a way, a flag, to specify the left margin of the > inner box, in such a way that its margin will be increased (if possible) to > avoid the floats (but at the same time this would reduce the width of the > content-box for the inner box, that's why we need a "min-width" also for > the inner content box. > > And simple way to specify it would be that the inner box would not just > say "margin-left:2em", but "margin-left:2em+0.5em", the "+" indicating that > it may be increased by the presence of prior left float (with ANY width). > The "0.5em" is optional: it allows setting an additional margin for the > content box, used only if there's a left-float, and that extra 0.5em will > collapse with the right margin of the float, the margin between both being > the higher value of the two > * so if the inner float has a "right-margin:0" the gap separating them > horizontally will be 0.5em = max(0, 0.5em) > * if the inner float has a "right-margin: 1em", the gap separating them > horizontally will be 1em = max(1em, 0.5em) > * Generally the floats have a small horizontal margin on their internal > side, and a 0 margin on their external side to align them with the parent's > content box. > > As well for the "margin-right" with right floats. > > Now floats can be present or absent, and can have any width if they are > present: the inner box will autoadapt its margin, but will clear > conditionally if their min-width cannot be satisfied. > > We never have to reserve some arbitrary margin for the inner box when we > don't know if there will be floats before (and these floats may > appear/disappear: imagine that the float is vertically collapsible (like > the TOC in a wiki page if it has been placed in a left-float). > > Le mar. 25 juin 2019 à 15:20, Oriol Brufau <notifications@github.com> a > écrit : > >> None of the 10 proposed solutions are what I expect. All of them still >> leaves the float going "inside" the block (that they cover). >> >> This doesn't seem right, see >> https://www.w3.org/TR/CSS22/visuren.html#floats >> >> The border box of [...] an element in the normal flow that establishes a >> new block formatting context (such as an element with 'overflow' other than >> 'visible') must not overlap the margin box of any floats in the same block >> formatting context as the element itself. >> >> So please clarify why "The block formatting context does not help here". >> An example with code would be useful. >> >> — >> You are receiving this because you authored the thread. >> Reply to this email directly, view it on GitHub >> <https://github.com/w3c/csswg-drafts/issues/4052?email_source=notifications&email_token=AAKSUGYSR5F6B6FJ332IXQLP4ILQTA5CNFSM4H2XO7AKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYQGWWA#issuecomment-505441112>, >> or mute the thread >> <https://github.com/notifications/unsubscribe-auth/AAKSUG5VQD2YCXS7EWNESBLP4ILQTANCNFSM4H2XO7AA> >> . >> > -- GitHub Notification of comment by verdy-p Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4052#issuecomment-506563298 using your GitHub account
Received on Friday, 28 June 2019 01:07:29 UTC