diff --git a/_drafts/whose-layout-is-it-anyways.markdown b/_drafts/whose-layout-is-it-anyways.markdown new file mode 100644 index 0000000..ef53994 --- /dev/null +++ b/_drafts/whose-layout-is-it-anyways.markdown @@ -0,0 +1,46 @@ +--- +layout: post +title: "Whose layout is it anyways — where the margins are made up and the spec doesn't matter" +categories: posts +description: TODO +--- + +I've been [working on rebuilding Kosmonaut's layout engine](https://github.com/twilco/kosmonaut/pull/14), and in doing +so uncovered a bizarre incongruence between one of the most foundational CSS specs and the actual implementation of said +spec in all major browsers. + +### The CSS box model and block layout + +In the CSS box model, boxes are made up of several components: margin, border, padding, and the box content. + +{:refdef: style="text-align: center;"} +![Picture of the CSS box model](/assets/img/box_model.png) +{:refdef} +
The CSS box model, taken from https://drafts.csswg.org/css2/#box-model
+ +When you visit a webpage, the specified HTML, CSS, and other resources are downloaded by your browser, parsed +into a DOM and styles, turned into a tree of boxes, laid out to determine box size and position, and painted to your screen. +Various CSS properties, such as `display`, influence the type of box or boxes each DOM node generates FOOTNOTE, and each box type +follows different rules in layout. One of the most common types of layout is _block layout_, which is what we'll be investigating today. + +### Block layout: calculating box width and margins + +Luckily, the CSS specifications are pretty detailed on how to calculate the size of each component of a box. We're +specifically going to be looking at the calculation of box width and left and right margins FOOTNOTE. + +--- + +> {% footnotes %} +> {% fnbody %} +> Check out the table from CSS Display Level 3 for a comprehensive list of boxes generated by each display value: +> https://drafts.csswg.org/css-display/#display-value-summary +> {% endfnbody %} +> {% fnbody %} +> When taking the writing-mode property into account, the equation we're investigating actually calculates the inline-size and inline-start and inline-end margins rather than width and left and right margins. To keep it simple, this post will discuss only the latter set of values. If you want to know more, the writing mode spec gives a nice overview of what changes in abstract layout: +> https://drafts.csswg.org/css-writing-modes-4/#abstract-layout +> {% endfnbody %} +> {% endfootnotes %} + + + +Alternative title: A practical lesson on CSS spec purity vs. reality

AltStyle によって変換されたページ (->オリジナル) /