Skip to content

Commit a100bd8

Browse files
atanassovatanassov
committed
[css-break] Addressing ASCII art issue
Adding SVG illustrations replacing the current ASCII art for remaining fragmentainer space and varying-size fragmentatiner sections. Created an image folder per previous WG resolution and moved existing images to it.
1 parent 9f32295 commit a100bd8

6 files changed

Lines changed: 252 additions & 94 deletions

File tree

‎css-break/Overview.bs‎

Lines changed: 13 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -856,33 +856,12 @@ Breaking into Varying-size Fragmentainers</h3>
856856
''box-decoration-break: clone'', if specified, wraps the fragment
857857
with the box's margin in addition to its padding and border.
858858
<div class="figure">
859-
<pre>First page
860-
<!-- -->+----------------------------------+
861-
<!-- -->|########### ......... ############|
862-
<!-- -->|# # ..... # #|
863-
<!-- -->|# left # ....... # right #|
864-
<!-- -->|# float # ......... # float #|
865-
<!-- -->|# # ........ # #|
866-
<!-- -->|# # ......... # #|
867-
<!-- -->|# # ........ # #|
868-
<!-- -->|#,,,,,,,,,# ......... #,,,,,,,,,,#|
869-
<!-- -->+----------------------------------+
870-
<!-- -->
871-
<!-- -->Second page
872-
<!-- -->
873-
<!-- -->+-----------------+
874-
<!-- -->|#`````````# .... |
875-
<!-- -->|# left # ... |
876-
<!-- -->|# float # .... |
877-
<!-- -->|# cont. # .... |
878-
<!-- -->|########### ... |
879-
<!-- -->|.... #``````````#|
880-
<!-- -->|... # right #|
881-
<!-- -->|.... # float #|
882-
<!-- -->|.... # cont. #|
883-
<!-- -->|.... ############|
884-
<!-- -->|............... |
885-
<!-- -->|....... |</pre>
859+
<p><img src="images/Varying-Size-Fragmentainers.svg"
860+
style="width: 75%"
861+
alt="Illustration: Breaking in varying-size fragmentainers" >
862+
<p class="caption">
863+
Illustration of breaking in varying-size fragmentainers.
864+
</p>
886865
</div>
887866
</li>
888867
</ul>
@@ -982,25 +961,13 @@ Splitting Boxes</h3>
982961
contributes progress towards any specified limits on the box's <i>block size</i>.
983962

984963
<div class="figure">
964+
<p><img
965+
style="width: 80%"
966+
src="images/Remaining-Fragmentainer-Extent.svg"
967+
alt="Illustration: Filling remaining fragmentainer extent">
985968
<p class="caption">
986-
The diagrams below illustrate filling the <i>remaining fragmentainer extent</i>.
969+
Illustration of filling the <i>remaining fragmentainer extent</i>.
987970
</p>
988-
<pre>
989-
+-----------------+ +-----------------+
990-
| ............... | | ............... |
991-
| .............. | | .............. |
992-
| ............... | | ............... |
993-
| .............. | | .............. |
994-
| ............ | | ............ |
995-
| ############### | | ############### |
996-
| # this box # | | # this box # |
997-
| # is # | | # is # | &lt;&lt; auto-height block
998-
| # fragmented # | | # fragmented # |
999-
| # # | | # # | &lt;-+
1000-
| # # | | # # | | remaining
1001-
| # # | | # # | | blank
1002-
| # # | | ############### | | space
1003-
+-----------------+ +-----------------+ &lt;-+</pre>
1004971
</div>
1005972

1006973
<h3 id="break-decoration">
@@ -1080,7 +1047,7 @@ Fragmented Borders and Backgrounds: the 'box-decoration-break' property</h3>
10801047
<p><img alt="Illustration:
10811048
(1) a single box cut in two in between two lines of text by a page break and
10821049
(2) two boxes, one before and one after the page break,
1083-
both with a border all around and their own background image" src="box-break.png">
1050+
both with a border all around and their own background image" src="images/box-break.png">
10841051

10851052
<p class=caption>Two possibilities for 'box-decoration-break':
10861053
on the left, the value ''slice'', on the right the value ''clone''.
@@ -1179,7 +1146,7 @@ Transforms, Positioning, and Pagination</h3>
11791146

11801147
<div class="figure">
11811148
<p><img alt="Illustration: Transformed overflow fragmentation"
1182-
src="fragmented-transforms.png">
1149+
src="images/fragmented-transforms.png">
11831150
<p class=caption>A fixed-height box spanning 2.5 pages with overflow content spanning
11841151
to a total of 4 pages.
11851152
The transform origin of each fragment is the center of its border box;

‎css-break/Overview.html‎

Lines changed: 19 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
<h1 class="p-name no-ref" id="title">CSS Fragmentation Module Level 3</h1>
8181

8282
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft,
83-
<time class="dt-updated" datetime="2015-07-16">16 July 2015</time></span></h2>
83+
<time class="dt-updated" datetime="2015-07-17">17 July 2015</time></span></h2>
8484

8585
<div data-fill-with="spec-metadata">
8686
<dl>
@@ -93,6 +93,7 @@ <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="cont
9393
<dt>Feedback:
9494
<dd><span><a href="mailto:www-style@w3.org?subject=%5Bcss-break%5D%20YOUR%20TOPIC%20HERE">www-style@w3.org</a> with subject line “<kbd>[css-break] <var>… message topic …</var></kbd>” (<a href="http://lists.w3.org/Archives/Public/www-style/" rel="discussion">archives</a>)</span>
9595
<dt>Issue Tracking:
96+
<dd><a href="https://github.com/w3c/csswg-drafts/issues/">GitHub</a>
9697
<dd><a href="#issues-index">Inline In Spec</a>
9798
<dt class="editor">Editors:
9899
<dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:ratan@microsoft.com<">Rossen Atanassov</a> (<span class="p-org org">Microsoft</span>)
@@ -1483,32 +1484,11 @@ <h3 class="heading settled" data-level="5.1" id="varying-size-boxes"><span class
14831484

14841485
<div class="figure">
14851486

1486-
<pre>First page+----------------------------------+
1487-
|########### ......... ############|
1488-
|# # ..... # #|
1489-
|# left # ....... # right #|
1490-
|# float # ......... # float #|
1491-
|# # ........ # #|
1492-
|# # ......... # #|
1493-
|# # ........ # #|
1494-
|#,,,,,,,,,# ......... #,,,,,,,,,,#|
1495-
+----------------------------------+
1496-
1497-
Second page
1498-
1499-
+-----------------+
1500-
|#`````````# .... |
1501-
|# left # ... |
1502-
|# float # .... |
1503-
|# cont. # .... |
1504-
|########### ... |
1505-
|.... #``````````#|
1506-
|... # right #|
1507-
|.... # float #|
1508-
|.... # cont. #|
1509-
|.... ############|
1510-
|............... |
1511-
|....... |</pre>
1487+
<p><img alt="Illustration: Breaking in varying-size fragmentainers" src="images/Varying-Size-Fragmentainers.svg" style="width: 75%">
1488+
</p>
1489+
<p class="caption">
1490+
Illustration of breaking in varying-size fragmentainers.
1491+
</p>
15121492

15131493

15141494
</div>
@@ -1643,27 +1623,12 @@ <h3 class="heading settled" data-level="5.3" id="box-splitting"><span class="sec
16431623
</p>
16441624
<div class="figure">
16451625

1626+
<p><img alt="Illustration: Filling remaining fragmentainer extent" src="images/Remaining-Fragmentainer-Extent.svg" style="width: 80%">
1627+
</p>
16461628
<p class="caption">
1647-
The diagrams below illustrate filling the <a data-link-type="dfn" href="#remaining-fragmentainer-extent">remaining fragmentainer extent</a>.
1629+
Illustration of filling the <a data-link-type="dfn" href="#remaining-fragmentainer-extent">remaining fragmentainer extent</a>.
16481630
</p>
16491631

1650-
1651-
<pre>+-----------------+ +-----------------+
1652-
| ............... | | ............... |
1653-
| .............. | | .............. |
1654-
| ............... | | ............... |
1655-
| .............. | | .............. |
1656-
| ............ | | ............ |
1657-
| ############### | | ############### |
1658-
| # this box # | | # this box # |
1659-
| # is # | | # is # | &lt;&lt; auto-height block
1660-
| # fragmented # | | # fragmented # |
1661-
| # # | | # # | &lt;-+
1662-
| # # | | # # | | remaining
1663-
| # # | | # # | | blank
1664-
| # # | | ############### | | space
1665-
+-----------------+ +-----------------+ &lt;-+</pre>
1666-
16671632

16681633
</div>
16691634

@@ -1793,7 +1758,7 @@ <h3 class="heading settled" data-level="5.4" id="break-decoration"><span class="
17931758
<p><img alt="Illustration:
17941759
(1) a single box cut in two in between two lines of text by a page break and
17951760
(2) two boxes, one before and one after the page break,
1796-
both with a border all around and their own background image" src="box-break.png">
1761+
both with a border all around and their own background image" src="images/box-break.png">
17971762

17981763
</p>
17991764
<p class="caption">Two possibilities for <a class="property" data-link-type="propdesc" href="#propdef-box-decoration-break">box-decoration-break</a>:
@@ -1876,7 +1841,7 @@ <h4 class="heading settled" data-level="5.4.1" id="joining-boxes"><span class="s
18761841

18771842
<dd>
18781843
Fragments are connected as if region content areas were glued together
1879-
in the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#block-flow-direction">block flow direction</a> of the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#principal-writing-mode">principal writing mode</a> of the <i data-lt="region chain">region chain</i>.
1844+
in the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#block-flow-direction">block flow direction</a> of the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#principal-writing-mode">principal writing mode</a> of the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-regions-1/#region-chain">region chain</a>.
18801845

18811846

18821847

@@ -1920,7 +1885,7 @@ <h3 class="heading settled" data-level="5.5" id="transforms"><span class="secno"
19201885
</p>
19211886
<div class="figure">
19221887

1923-
<p><img alt="Illustration: Transformed overflow fragmentation" src="fragmented-transforms.png">
1888+
<p><img alt="Illustration: Transformed overflow fragmentation" src="images/fragmented-transforms.png">
19241889
</p>
19251890
<p class="caption">A fixed-height box spanning 2.5 pages with overflow content spanning
19261891
to a total of 4 pages.
@@ -2247,6 +2212,10 @@ <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="con
22472212
<ul>
22482213
<li><a href="http://dev.w3.org/csswg/css-position-3/#propdef-top">top</a>
22492214
</ul>
2215+
<li><a data-link-type="biblio" href="#biblio-css-regions-1">[css-regions-1]</a> defines the following terms:
2216+
<ul>
2217+
<li><a href="http://dev.w3.org/csswg/css-regions-1/#region-chain">region chain</a>
2218+
</ul>
22502219
<li><a data-link-type="biblio" href="#biblio-css-sizing-3">[css-sizing-3]</a> defines the following terms:
22512220
<ul>
22522221
<li><a href="http://dev.w3.org/csswg/css-sizing-3/#fill_available-size">fill-available size</a>
@@ -2294,6 +2263,8 @@ <h3 class="no-num heading settled" id="normative"><span class="content">Normativ
22942263
<dd>CSS Paged Media Module Level 3 URL: <a href="http://www.w3.org/TR/css3-page/">http://www.w3.org/TR/css3-page/</a>
22952264
<dt id="biblio-css-position-3"><a class="self-link" href="#biblio-css-position-3"></a>[CSS-POSITION-3]
22962265
<dd>CSS Positioned Layout Module Level 3 URL: <a href="http://www.w3.org/TR/css3-positioning/">http://www.w3.org/TR/css3-positioning/</a>
2266+
<dt id="biblio-css-regions-1"><a class="self-link" href="#biblio-css-regions-1"></a>[CSS-REGIONS-1]
2267+
<dd>Rossen Atanassov; Alan Stearns. <a href="http://www.w3.org/TR/css-regions-1/">CSS Regions Module Level 1</a>. 9 October 2014. WD. URL: <a href="http://www.w3.org/TR/css-regions-1/">http://www.w3.org/TR/css-regions-1/</a>
22972268
<dt id="biblio-css-sizing-3"><a class="self-link" href="#biblio-css-sizing-3"></a>[CSS-SIZING-3]
22982269
<dd>CSS Intrinsic &amp; Extrinsic Sizing Module Level 3 URL: <a href="http://www.w3.org/TR/css3-sizing/">http://www.w3.org/TR/css3-sizing/</a>
22992270
<dt id="biblio-css-writing-modes-3"><a class="self-link" href="#biblio-css-writing-modes-3"></a>[CSS-WRITING-MODES-3]

‎css-break/images/Remaining-Fragmentainer-Extent.svg‎

Lines changed: 104 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)