CINXE.COM
drafts: diff css-display-4/Overview.bs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="icon" href="/drafts/static/hgicon.png" type="image/png" /> <meta name="robots" content="index, nofollow"/> <link rel="stylesheet" href="/drafts/static/style-monoblue.css" type="text/css" /> <script type="text/javascript" src="/drafts/static/mercurial.js"></script> <title>drafts: diff css-display-4/Overview.bs</title> <link rel="alternate" type="application/atom+xml" href="/drafts/atom-log" title="Atom feed for drafts"/> <link rel="alternate" type="application/rss+xml" href="/drafts/rss-log" title="RSS feed for drafts"/> </head> <body> <div id="container"> <div class="page-header"> <h1 class="breadcrumb"><a href="/">Mercurial</a> > <a href="/drafts">drafts</a> / file diff</h1> <form action="/drafts/log"> <dl class="search"> <dt><label>Search: </label></dt> <dd><input type="text" name="rev" /></dd> </dl> </form> <ul class="page-nav"> <li><a href="/drafts/summary">summary</a></li> <li><a href="/drafts/shortlog">shortlog</a></li> <li><a href="/drafts/log">changelog</a></li> <li><a href="/drafts/graph/ab8d90253b2d">graph</a></li> <li><a href="/drafts/tags">tags</a></li> <li><a href="/drafts/bookmarks">bookmarks</a></li> <li><a href="/drafts/branches">branches</a></li> <li><a href="/drafts/file/ab8d90253b2d">files</a></li> <li><a href="/drafts/help">help</a></li> </ul> </div> <ul class="submenu"> <li><a href="/drafts/file/ab8d90253b2d/css-display-4/Overview.bs">file</a></li> <li><a href="/drafts/log/ab8d90253b2d/css-display-4/Overview.bs">revisions</a></li> <li><a href="/drafts/annotate/ab8d90253b2d/css-display-4/Overview.bs">annotate</a></li> <li class="current">diff</li> <li><a href="/drafts/comparison/ab8d90253b2d/css-display-4/Overview.bs">comparison</a></li> <li><a href="/drafts/raw-diff/ab8d90253b2d/css-display-4/Overview.bs">raw</a></li> </ul> <h2 class="no-link no-border">diff: css-display-4/Overview.bs</h2> <h3 class="changeset">css-display-4/Overview.bs</h3> <dl class="overview"> <dt>changeset 29470</dt> <dd><a href="/drafts/rev/ab8d90253b2d">ab8d90253b2d</a></dd> <dt>parent 29416</dt> <dd><a href="/drafts/diff/898d153ffe74/css-display-4/Overview.bs">898d153ffe74</a></dd> <dt>child 29690</dt> <dd><a href="/drafts/diff/9b7f4d98090d/css-display-4/Overview.bs">9b7f4d98090d</a></dd> </dl> <div class="diff"> <pre><span style="color:#cc0000;"><a class="linenr" href="#l1.1" id="l1.1"> 1.1</a> --- a/css-display-4/Overview.bs Thu Jan 19 18:17:11 2023 +0200 </span><span style="color:#008800;"><a class="linenr" href="#l1.2" id="l1.2"> 1.2</a> +++ b/css-display-4/Overview.bs Thu Jan 19 16:11:44 2023 -0500 </span><span style="color:#990099;"><a class="linenr" href="#l1.3" id="l1.3"> 1.3</a> @@ -1014,9 +1014,7 @@ </span><span><a class="linenr" href="#l1.4" id="l1.4"> 1.4</a> <pre class='propdef shorthand'> </span><span><a class="linenr" href="#l1.5" id="l1.5"> 1.5</a> Name: order </span><span><a class="linenr" href="#l1.6" id="l1.6"> 1.6</a> Value: [ <<'layout-order'>> <<'reading-order'>>? ] | </span><span style="color:#cc0000;"><a class="linenr" href="#l1.7" id="l1.7"> 1.7</a> - [ reading && <<'reading-order'>> ] | </span><span style="color:#cc0000;"><a class="linenr" href="#l1.8" id="l1.8"> 1.8</a> - [ layout && <<'layout-order'>> ] | </span><span style="color:#cc0000;"><a class="linenr" href="#l1.9" id="l1.9"> 1.9</a> - [ reading-and-layout && <<integer>> ] </span><span style="color:#008800;"><a class="linenr" href="#l1.10" id="l1.10"> 1.10</a> + [ [ reading || layout ] && <<integer>> ] </span><span><a class="linenr" href="#l1.11" id="l1.11"> 1.11</a> Applies to: [=flex items=] and [=grid items=] </span><span><a class="linenr" href="#l1.12" id="l1.12"> 1.12</a> Inherited: no </span><span><a class="linenr" href="#l1.13" id="l1.13"> 1.13</a> </pre> </span><span style="color:#990099;"><a class="linenr" href="#l1.14" id="l1.14"> 1.14</a> @@ -1038,9 +1036,34 @@ </span><span><a class="linenr" href="#l1.15" id="l1.15"> 1.15</a> </span><span><a class="linenr" href="#l1.16" id="l1.16"> 1.16</a> The 'order' property sets both 'layout-order' and 'reading-order' </span><span><a class="linenr" href="#l1.17" id="l1.17"> 1.17</a> in a single declaration. </span><span style="color:#cc0000;"><a class="linenr" href="#l1.18" id="l1.18"> 1.18</a> - Unless <dfn value for=order>reading-and-layout</dfn> is specified-- </span><span style="color:#cc0000;"><a class="linenr" href="#l1.19" id="l1.19"> 1.19</a> - in which case both <<'reading-order'>> and <<'layout-order'>> are set to the specified <<integer>> value-- </span><span style="color:#cc0000;"><a class="linenr" href="#l1.20" id="l1.20"> 1.20</a> - the omitted [=longhand=] is <em>set to zero</em>. </span><span style="color:#008800;"><a class="linenr" href="#l1.21" id="l1.21"> 1.21</a> + Values have the following meanings: </span><span style="color:#008800;"><a class="linenr" href="#l1.22" id="l1.22"> 1.22</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.23" id="l1.23"> 1.23</a> + <dl dfn-for=order dfn-type=value> </span><span style="color:#008800;"><a class="linenr" href="#l1.24" id="l1.24"> 1.24</a> + <dt><dfn><<integer>></dfn> </span><span style="color:#008800;"><a class="linenr" href="#l1.25" id="l1.25"> 1.25</a> + <dd> </span><span style="color:#008800;"><a class="linenr" href="#l1.26" id="l1.26"> 1.26</a> + If one integer and no keyword is specified, </span><span style="color:#008800;"><a class="linenr" href="#l1.27" id="l1.27"> 1.27</a> + then sets 'layout-order' to the specified integer, </span><span style="color:#008800;"><a class="linenr" href="#l1.28" id="l1.28"> 1.28</a> + and sets 'reading-order' to its [=initial value=]. </span><span style="color:#008800;"><a class="linenr" href="#l1.29" id="l1.29"> 1.29</a> + If two integers are specified, </span><span style="color:#008800;"><a class="linenr" href="#l1.30" id="l1.30"> 1.30</a> + the first sets 'layout-order' and the second sets 'reading-order'. </span><span style="color:#008800;"><a class="linenr" href="#l1.31" id="l1.31"> 1.31</a> + Otherwise sets the appropriate [=longhand=](s) to the specified integer(s). </span><span style="color:#008800;"><a class="linenr" href="#l1.32" id="l1.32"> 1.32</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.33" id="l1.33"> 1.33</a> + <dt><dfn>layout</dfn> </span><span style="color:#008800;"><a class="linenr" href="#l1.34" id="l1.34"> 1.34</a> + <dd> </span><span style="color:#008800;"><a class="linenr" href="#l1.35" id="l1.35"> 1.35</a> + Indicates setting 'layout-order' to the specified integer. </span><span style="color:#008800;"><a class="linenr" href="#l1.36" id="l1.36"> 1.36</a> + If ''reading'' is not specified, </span><span style="color:#008800;"><a class="linenr" href="#l1.37" id="l1.37"> 1.37</a> + 'reading-order' is set to its [=initial value=]. </span><span style="color:#008800;"><a class="linenr" href="#l1.38" id="l1.38"> 1.38</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.39" id="l1.39"> 1.39</a> + <dt><dfn>reading</dfn> </span><span style="color:#008800;"><a class="linenr" href="#l1.40" id="l1.40"> 1.40</a> + <dd> </span><span style="color:#008800;"><a class="linenr" href="#l1.41" id="l1.41"> 1.41</a> + Indicates setting 'reading-order' to the specified integer. </span><span style="color:#008800;"><a class="linenr" href="#l1.42" id="l1.42"> 1.42</a> + If ''layout'' is not specified, </span><span style="color:#008800;"><a class="linenr" href="#l1.43" id="l1.43"> 1.43</a> + 'layout-order' is set to its [=initial value=]. </span><span style="color:#008800;"><a class="linenr" href="#l1.44" id="l1.44"> 1.44</a> + </dl> </span><span style="color:#008800;"><a class="linenr" href="#l1.45" id="l1.45"> 1.45</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.46" id="l1.46"> 1.46</a> + Note: The single-integer syntax sets only 'layout-order', </span><span style="color:#008800;"><a class="linenr" href="#l1.47" id="l1.47"> 1.47</a> + in order to enable rearranging layout for better visual display </span><span style="color:#008800;"><a class="linenr" href="#l1.48" id="l1.48"> 1.48</a> + without changing the underlying reading order. </span><span><a class="linenr" href="#l1.49" id="l1.49"> 1.49</a> </span><span><a class="linenr" href="#l1.50" id="l1.50"> 1.50</a> <div class='example'> </span><span><a class="linenr" href="#l1.51" id="l1.51"> 1.51</a> Here's an example of a catalog item card </span><span style="color:#990099;"><a class="linenr" href="#l1.52" id="l1.52"> 1.52</a> @@ -1189,7 +1212,7 @@ </span><span><a class="linenr" href="#l1.53" id="l1.53"> 1.53</a> Specifically, the 'layout-order' property controls the order in which </span><span><a class="linenr" href="#l1.54" id="l1.54"> 1.54</a> [=flex items=] or [=grid items=] appear within their container </span><span><a class="linenr" href="#l1.55" id="l1.55"> 1.55</a> by assigning them to the ordinal groups, </span><span style="color:#cc0000;"><a class="linenr" href="#l1.56" id="l1.56"> 1.56</a> - as specified by its <dfn value for=order><<integer>></dfn> value. </span><span style="color:#008800;"><a class="linenr" href="#l1.57" id="l1.57"> 1.57</a> + as specified by its <dfn value for=layout-order><<integer>></dfn> value. </span><span><a class="linenr" href="#l1.58" id="l1.58"> 1.58</a> </span><span><a class="linenr" href="#l1.59" id="l1.59"> 1.59</a> [=flex container|Flex=] and [=grid containers=] then lay out their contents </span><span><a class="linenr" href="#l1.60" id="l1.60"> 1.60</a> in <dfn export>order-modified document order</dfn>, </span></pre> </div> <script type="text/javascript">process_dates()</script> <div class="page-footer"> <p>Mercurial Repository: drafts</p> <ul class="rss-logo"> <li><a href="/drafts/rss-log">RSS</a></li> <li><a href="/drafts/atom-log">Atom</a></li> </ul> </div> <div id="powered-by"> <p><a href="http://mercurial.selenic.com/" title="Mercurial"><img src="/drafts/static/hglogo.png" width=75 height=90 border=0 alt="mercurial"></a></p> </div> <div id="corner-top-left"></div> <div id="corner-top-right"></div> <div id="corner-bottom-left"></div> <div id="corner-bottom-right"></div> </div> </body> </html>