drafts: css-multicol-2/Overview.bs@5be73fbc8592

     1 <pre class="metadata">

     2 Title: CSS Multi-column Layout Module Level 2

     3 Group: CSSWG

     4 Shortname: css-multicol

     5 Level: 2

     6 Status: ED

     7 Work Status: Exploring

     8 ED: https://drafts.csswg.org/css-multicol-2/

     9 Editor: Florian Rivoal, Invited Expert, [email protected], http://florian.rivoal.net/

    10 Abstract: This specification describes multi-column layouts in CSS, a style sheet language for the web. Using functionality described in the specification, content can be flowed into multiple columns with a gap and a rule between them.

    11 Abstract:

    12 Abstract: This is a delta specification over CSS Multi-column Level 1.

    13           Once the level 1 specification is final,

    14           its content will be integrated into this specification,

    15           which will then replace it.

    16           Until then, CSS Multi-column Level 2 only contains additions and extensions to level 1

    17 Ignored Terms: column-width, column-count, columns, column-gap, column-rule-color, column-rule-style, column-rule-width, column-rule, column-fill

    18                <!-- remove line above once this is no longer a delta spec -->

    19 </pre>

    21 <style type="text/css">

    22 .cols { width: 500px; height: 200px; background: #fff; position: relative; border: solid 5px blue; margin: 0.5em 2em 1em 0; font: bold 14px/19px Arial, sans-serif }

    23 .cols p { padding: 3px; margin: 0 }

    24 .col { position: absolute; left: 0px; top: 0; z-index: 6; width: 170px }

    25 .gap { position: absolute; background: green; width: 5px; bottom: 0px; top: 0px; border: 10px solid yellow; border-top-width: 0; border-bottom-width: 0;  }

    26 .rep { position: absolute; top: 45px; background: black; height: 110px; width: 100px;  color: white; z-index: 4 }

    28 table.breaks { border-collapse: collapse; margin: 1em 0 }

    29 table.breaks td, table.breaks th { border: thin solid black; padding: 0.1em 0.2em }

    31 div.example:before { width: 9em }

    32 </style>

    34 <h2 id="introduction">

    35 Introduction</h2>

    37 	Issue: Add final content from previous level

    39 <h2 id="interaction">Module Interactions</h2>

    41 This document defines new features not present in earlier specifications.

    42 In addition, once final, it will replace and supersede the following:

    44 <ul>

    45 <li>The <a href="http://www.w3.org/TR/css3-multicol">CSS Multi-Column Layout Module Level 1</a>

    46 </ul>

    48 <h2 id="the-multi-column-model">

    49 The multi-column model</h2>

    51 	Issue: Add final content from previous level

    53 <h2 id="the-number-and-width-of-columns">

    54 The number and width of columns</h2>

    56 	Issue: Add final content from previous level

    58 <h3 id='cw'>

    59 'column-width'</h3>

    61 	Issue: Add final content from previous level

    63 <h3 id='cc'>

    64 'column-count'</h3>

    66 	Issue: Add final content from previous level

    68 <h3 id="columns">

    69 'columns'</h3>

    71 	Issue: Add final content from previous level

    73 <h3 id="pseudo-algorithm">

    74 Pseudo-algorithm</h3>

    76 	Issue: Add final content from previous level

    78 <h3 id="stacking-context">

    79 Stacking context</h3>

    81 	Issue: Add final content from previous level

    83 <h2 id="column-gaps-and-rules">

    84 Column gaps and rules</h2>

    86 	Issue: Add final content from previous level

    88 <h3 id='column-gap'>

    89 'column-gap'</h3>

    91 	Issue: Add final content from previous level

    93 <h3 id='crc'>

    94 'column-rule-color'</h3>

    96 	Issue: Add final content from previous level

    98 <h3 id='crs'>

    99 'column-rule-style'</h3>

   101 	Issue: Add final content from previous level

   103 <h3 id='crw'>

   104 'column-rule-width'</h3>

   106 	Issue: Add final content from previous level

   108 <h3 id="column-rule">

   109 'column-rule'</h3>

   111 	Issue: Add final content from previous level

   113 <h2 id="column-breaks">

   114 Column breaks</h2>

   116 	The previous level of this specification defined how

   117 	the user agent must determine where column breaks are placed

   118 	when content is laid out in multiple columns.

   119 	The [[!CSS3-BREAK]] module has since been introduced

   120 	to define how to break the content across pages,

   121 	columns, or <a spec=css-regions>CSS Regions</a>,

   122 	and supersedes <a href="https://drafts.csswg.org/css-multicol/#column-breaks">the column break</a> section of [[CSS3-MULTICOL]].

   124 	This specification defers to [[!CSS3-BREAK]] on this topic.

   126 <h3 id="break-before-break-after-break-inside">

   127 'break-before', 'break-after', 'break-inside'</h3>

   129 	The 'break-before', 'break-after' and 'break-inside' properties are now defined in [[!CSS3-BREAK]].

   131 <h2 id="spanning-columns">

   132 Spanning columns</h2>

   134 	The 'column-span' property makes it possible for an element to span across several columns.

   135 	This specification adds <<integer>> to the values available in the previous level.

   138 <h3 id="column-span">

   139 'column-span'</h3>

   141 	<pre class="parial propdef">

   142 	Name: column-span

   143 	Value: none | <<integer>> | all

   144 	Initial: none

   145 	Applies to: in-flow block-level elements

   146 	Inherited: no

   147 	Percentages: N/A

   148 	Media: visual

   149 	Computed value: specified value

   150 	</pre>

   152 	This property describes how many columns an element spans across. Values are:

   154 	<dl dfn-type=value dfn-for=column-span>

   155 		<dt><dfn>none</dfn>

   156 		<dt><dfn>all</dfn>

   157 		<dd>

   159 			Issue: Add final content from previous level

   161 		<dt><dft><<integer>></dfn>

   162 		<dd>

   163 			The element spans the specified number of columns.

   164 			Values must be greater than 0.

   165 			If the specified integer value is equal to,

   166 			or larger than the number of columns in the multicol element,

   167 			the number of columns spanned will be the same as if ''column-span: all'' had been specified.

   169 			<div class=issue>This definition is insufficent.

   170 			<ul>

   171 				<li>Does ''column-span: 1'' count as ''column-span: none'',

   172 				or does it create a spanner (which is a BFC)?

   173 				<li>Which columns does it span?

   174 				<li>How does that affect height calculations, and interract with column-fill

   175 			</ul>

   176 			</div>

   178 			Issue: <a href="https://figures.spec.whatwg.org/">CSS Figures</a> has evolved into a different approach.

   179 	</dl>

   181 	Issue: Add final content from previous level

   182 	possibly with adjustements to account for <<integer>> values

   184 <h2 id="filling-columns">

   185 Filling columns</h2>

   187 	Issue: Add final content from previous level

   189 <h3 id='cf'>

   190 'column-fill'</h3>

   192 	Issue: Add final content from previous level

   194 <h2 id="overflow">

   195 Overflow</h2>

   197 <h3 id="overflow-inside-multicol-elements">

   198 Overflow inside multicol elements</h3>

   200 	Issue: Add final content from previous level

   202 <h3 id="pagination-and-overflow-outside-multicol">

   203 Pagination and overflow outside multicol elements</h3>

   205 	Issue: Add final content from previous level

   207 <h2 class=no-num id=acknowledgments>

   208 Acknowledgments</h2>

   210 	This document builds upon HÃ¥kon Wium Lie's work in [[CSS3-MULTICOL]],

   211 	and is based on several older proposals and comments on older proposals.

   212 	Contributors include:

   214 	Issue: Add final level 1 contributor list

Mercurial > drafts / file revision

css-multicol-2/Overview.bs@5be73fbc8592

css-multicol-2/Overview.bs