13 | <script src='cssregions.js'></script> 14 |15 | 16 | Use standard CSS regions syntax on the same page. 17 |
18 | #content{
19 | /* pull content into a named flow */
20 | flow-into: myflow;
21 | }
22 |
23 | .region{
24 | /* flow the content into other boxes */
25 | flow-from: myFlow;
26 |
27 | width: 200px;
28 | height: 100px;
29 | }
30 |
31 |
32 | The `#content` will be extracted and split across `.region` elements. Regions should be block elements and have explicit dimensions for the polyfill to work.
33 |
34 |
35 | ## Contributing
36 |
37 | **DO NOT directly modify the `cssregions.js` or `cssregions.min.js` files in the project root.** These files are automatically built from components located under the `src/` directory.
38 |
39 | The project uses [Grunt](http://gruntjs.com) to automate the build process.
40 |
41 |
42 | Grunt depends on [Node.js](http://nodejs.org/) and [npm](https://npmjs.org/).
43 |
44 |
45 | **Install Grunt**
46 | ```
47 | npm install -g grunt
48 | ```
49 |
50 | Tell Grunt to watch for changes and automatically build `cssregions.js` and `cssregions.min.js`:
51 | ```
52 | cd ./path/to/polyfill/
53 | grunt watch
54 | ```
55 |
56 | While `grunt watch` is running, every time you make changes to components under `src/` the main files, `cssregions.js` and `cssregions.min.js`, are built and written to the project root.
57 |
58 | To do a one-time build run:
59 | ```
60 | grunt build
61 | ```
62 |
63 | ## Testing
64 |
65 | The polyfill has a [QUnit](https://github.com/jquery/qunit)-driven test suite in the `/test/` folder. New code should include at least one test.
66 |
67 | **Run the tests**
68 |
69 | Open the `test/index.html` file in a browser. This runs the QUnit test suite. Refresh compulsively after making changes to project files. You can automatically run the test suite with other tools. See below.
70 |
71 |
72 | ### Optionals
73 |
74 | [Testem](https://github.com/airportyh/testem) automatically runs the QUnit suite across browsers as you make changes to the files. A configuration is provided in `/testem.json`. Testem is optional, but [pretty cool](http://net.tutsplus.com/tutorials/javascript-ajax/make-javascript-testing-fun-with-testem/).
75 |
76 | Testem depends on [NodeJS](http://nodejs.org/) and [npm](https://npmjs.org/).
77 |
78 | **Install Testem**
79 |
80 | ```npm install testem -g```
81 |
82 | **Run Testem**
83 | ```
84 | cd ./path/to/polyfill/
85 | testem
86 | ```
87 | This command will open up the browsers specified in the `testem.json` config file and run the test suite located at `/test/index.html`. As you make changes to any of the files, Testem will re-run the tests.
88 |
89 | Learn more from the [Testem docs](https://github.com/airportyh/testem/blob/master/README.md)
90 |
91 |
92 | ## License information
93 |
94 | The code in this repository implies and respects different licenses. This is a quick overview. For details check each folder's corresponding LICENSE.md file.
95 |
96 | - Apache 2 for CSS Regions polyfill
97 | - Public Domain for tests, demos and docs
98 | - Third party assets under their own licenses
99 |
100 | See LICENSE.md for details.
101 |
--------------------------------------------------------------------------------
/SUPPORT.md:
--------------------------------------------------------------------------------
1 | CSS Regions Polyfill Feature Support
2 | =====
3 |
4 | A lot of effort was put into building the current polyfill to support the basic use cases for CSS Regions.
5 | Some features require refinement, others are not yet implemented.
6 |
7 | The CSS Regions polyfill is meant to illustrate the functionality of CSS Regions in browsers that don't yet support
8 | them. Keep in mind that the polyfill cannot match the peformance or the full scope of features natively
9 | implemented in the browser.
10 |
11 | Your feedback, suggestions and contributions are welcome.
12 |
13 |
14 | What works
15 | ---
16 | - CSS `flow-into` and `flow-from` properties;
17 | - CSS Object Model:
18 | - `document.getNamedFlows()`;
19 | - `NamedFlow` interface;
20 | - `NamedFlow.overset` property;
21 | - `NamedFlow.firstEmptyRegionIndex` property;
22 | - `NamedFlow.getRegions()` method;
23 | - `NamedFlow.getContent()` method;
24 | - `regionlayoutupdate` event on `NamedFlow`;
25 | - `Region.regionOverset` property;
26 | - content reflow due to viewport resize;
27 |
28 | What kind of works:
29 | ---
30 | - CSS Object Model:
31 | - `NamedFlow.getRegionsByContent()`;
32 | This is almost next to impossible to implement it correctly for all possible scenarios in JavaScript. The current
33 | implementation might work for some use cases and not for others.
34 |
35 | What doesn't work
36 | ---
37 | - content reflow due to media queries;
38 | - content reflow due to DOM changes;
39 | - content reflow due to viewport orientation change;
40 | - nested named flows;
41 | - loading styles from cross-domain linked stylesheets;
42 | - CSS `region-break-*` properties;
43 | - CSS `region-overset` property;
44 | - CSS region styling with `@region`;
45 | - CSS Object Model:
46 | - `Region.getRegionFlowRanges()` method;
47 | - `Region.getComputedRegionStyle()` method;
48 |
--------------------------------------------------------------------------------
/adobelogo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
42 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | body, html, h1, h2, h3, header p, article p {
2 | margin: 0;
3 | padding: 0;
4 | }
5 |
6 | body, html {
7 | font-family: source-sans-pro, helvetica, arial, sans-serif;
8 | font-size: 100%;
9 | color: #333;
10 | padding-bottom: 2em;
11 | }
12 |
13 | h1, h2, h3 {
14 | font-family: league-gothic, helvetica, arial, serif;
15 | font-weight: normal;
16 | }
17 |
18 | h1 {
19 | font-size: 4em;
20 | }
21 |
22 | h2 {
23 | font-size: 2em;
24 | margin: 1em 0 0.5em;
25 | }
26 |
27 | h3 {
28 | font-size: 1.7em;
29 | margin: 1.2em 0 0.3em;
30 | color: gray;
31 | }
32 |
33 | pre, code {
34 | font-family: source-code-pro, monospace;
35 | }
36 |
37 | code {
38 | background: #eee;
39 | padding: 0 0.2em;
40 | font-size: 0.8em;
41 | /* border: 1px solid #d7d7d7;*/
42 | }
43 |
44 | pre {
45 | padding: 0.5em;
46 | margin: 0 0 2em;
47 | /* border: 1px solid #d7d7d7;*/
48 | background: #eee;
49 | overflow: auto;
50 | }
51 |
52 | section {
53 | margin: 2em 0 1em;
54 | }
55 |
56 | header, article {
57 | padding: 0 1em 0;
58 | }
59 |
60 | header {
61 | padding-top: 3em;
62 | }
63 | header h1 {
64 | margin: 0 0 35px;
65 | margin: 0 0 2rem;
66 | color: black;
67 | }
68 | header p {
69 | font-size: 1.1em;
70 | line-height: 1.5em;
71 | margin: 0 0 1.5em;
72 | color: #333;
73 | }
74 | header:after {
75 | content: " ";
76 | display: block;
77 | clear: both;
78 | }
79 |
80 | article p {
81 | margin: 1em 0;
82 | }
83 | article p, article li {
84 | line-height: 1.5em;
85 | }
86 |
87 | #download {
88 | text-align: center;
89 | width: 100%;
90 | margin: 0 0 2em;
91 | }
92 | #download .button {
93 | display: block;
94 | background: lightgreen;
95 | font-size: 2em;
96 | color: darkgreen;
97 | text-align: center;
98 | padding: 0.3em 0;
99 | margin: 0 0 0.3em;
100 | border-radius: 5px;
101 | text-decoration: none;
102 | font-family: league-gothic, helvetica, arial, sans-serif;
103 | }
104 | #download .button:hover {
105 | background: darkgreen;
106 | color: white;
107 | }
108 | #download span {
109 | color: #999;
110 | font-size: 0.8em;
111 | }
112 | #download span a {
113 | color: #999;
114 | }
115 | #download span a:hover {
116 | color: darkgray;
117 | }
118 | #download span + span {
119 | display: block;
120 | }
121 |
122 | .logo {
123 | position: absolute;
124 | overflow: hidden;
125 | right: 10%;
126 | top: 0;
127 | height: 0;
128 | /* hide text beyond overflow */
129 | padding-top: 4em;
130 | width: 2.2em;
131 | background: url(../adobelogo.svg) center top no-repeat;
132 | background-size: cover;
133 | }
134 |
135 | @media screen and (min-width: 42em) {
136 | header, article {
137 | max-width: 40em;
138 | margin: 0 auto;
139 | font-size: 110%;
140 | }
141 |
142 | section:first-of-type {
143 | margin-top: 1em;
144 | }
145 |
146 | .logo {
147 | right: 1em;
148 | }
149 |
150 | header {
151 | position: relative;
152 | }
153 | header p {
154 | float: left;
155 | width: 60%;
156 | margin-bottom: 0;
157 | }
158 | header #download {
159 | width: 35%;
160 | float: right;
161 | margin-bottom: 0;
162 | }
163 | header #download span + span {
164 | display: inline;
165 | }
166 | }
167 |
--------------------------------------------------------------------------------
/css/style.scss:
--------------------------------------------------------------------------------
1 | %reset{
2 | margin: 0;
3 | padding: 0;
4 | }
5 |
6 | body, html{
7 | @extend %reset;
8 | font-family: source-sans-pro, helvetica, arial, sans-serif;
9 | font-size: 100%;
10 | color: #333;
11 | padding-bottom: 2em;
12 | }
13 |
14 | h1, h2, h3{
15 | @extend %reset;
16 | font-family: league-gothic, helvetica, arial, serif;
17 | font-weight: normal;
18 | }
19 |
20 | h1{
21 | font-size: 4em;
22 | }
23 |
24 | h2{
25 | font-size: 2em;
26 | margin: 1em 0 0.5em;
27 | }
28 |
29 | h3{
30 | font-size: 1.7em;
31 | margin: 1.2em 0 0.3em;
32 | color: gray;
33 | }
34 |
35 | pre, code{
36 | font-family: source-code-pro, monospace;
37 | }
38 |
39 | code{
40 | background: #eee;
41 | padding: 0 0.2em;
42 | font-size: 0.8em;
43 | /* border: 1px solid #d7d7d7;*/
44 | }
45 |
46 | pre{
47 | padding: 0.5em;
48 | margin: 0 0 2em;
49 | /* border: 1px solid #d7d7d7;*/
50 | background: #eee;
51 | overflow: auto;
52 | }
53 |
54 | section{
55 | margin: 2em 0 1em;
56 | }
57 |
58 | header, article{
59 | padding: 0 1em 0;
60 | }
61 |
62 | header{
63 | padding-top: 3em;
64 |
65 | h1{
66 | margin: 0 0 35px;
67 | margin: 0 0 2rem;
68 | color: black;
69 | }
70 |
71 | p{
72 | @extend %reset;
73 | font-size: 1.1em;
74 | line-height: 1.5em;
75 | margin: 0 0 1.5em;
76 | color: #333;
77 | }
78 |
79 |
80 | &:after{
81 | content: " ";
82 | display: block;
83 | clear: both;
84 | }
85 | }
86 |
87 | article{
88 | p{
89 | @extend %reset;
90 | margin: 1em 0;
91 | }
92 |
93 | p, li{
94 | line-height: 1.5em;
95 | }
96 | }
97 |
98 | #download{
99 | text-align: center;
100 | width: 100%;
101 | margin: 0 0 2em;
102 |
103 | .button{
104 | display: block;
105 | background: lightgreen;
106 | font-size: 2em;
107 | color: darkgreen;
108 | text-align: center;
109 | padding: 0.3em 0;
110 | margin: 0 0 0.3em;
111 | border-radius: 5px;
112 | text-decoration: none;
113 | font-family: league-gothic, helvetica, arial, sans-serif;
114 |
115 | &:hover{
116 | background: darkgreen;
117 | color: white;
118 | }
119 | }
120 |
121 | span{
122 | color: #999;
123 | font-size: 0.8em;
124 |
125 | a{
126 | color: #999;
127 |
128 | &:hover{
129 | color: darkgray;
130 | }
131 | }
132 | }
133 |
134 | span + span{
135 | display: block;
136 | }
137 | }
138 |
139 | .logo{
140 | position: absolute;
141 | overflow: hidden;
142 | right: 10%;
143 | top: 0;
144 | height: 0;
145 | /* hide text beyond overflow */
146 | padding-top: 4em;
147 | width: 2.2em;
148 | background: url(../adobelogo.svg) center top no-repeat;
149 | background-size: cover;
150 | }
151 |
152 | @media screen and (min-width: 42em){
153 | header, article{
154 | max-width: 40em;
155 | margin: 0 auto;
156 | font-size: 110%;
157 | }
158 |
159 | section:first-of-type{
160 | margin-top: 1em;
161 | }
162 |
163 | .logo{
164 | right: 1em;
165 | }
166 |
167 | header{
168 | // makes abs position .logo relative to header
169 | position: relative;
170 |
171 | p {
172 | float: left;
173 | width: 60%;
174 | margin-bottom: 0;
175 | }
176 |
177 | #download{
178 | width: 35%;
179 | float: right;
180 | margin-bottom: 0;
181 |
182 | span + span{
183 | display: inline;
184 | }
185 | }
186 |
187 | }
188 | }
189 |
--------------------------------------------------------------------------------
/cssregions.min.js:
--------------------------------------------------------------------------------
1 | /*! Copyright 2012 Adobe Systems Inc.;
2 | * Licensed under the Apache License, Version 2.0 (the "License");
3 | * you may not use this file except in compliance with the License.
4 | * You may obtain a copy of the License at
5 |
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 |
8 | * Unless required by applicable law or agreed to in writing, software
9 | * distributed under the License is distributed on an "AS IS" BASIS,
10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11 | * See the License for the specific language governing permissions and
12 | * limitations under the License.
13 | */
14 | !function(){typeof String.prototype.trim!="function"&&(String.prototype.trim=function(e){return e.replace(/^\s+/,"").replace(/\s+$/,"")}),typeof Array.prototype.forEach!="function"&&(Array.prototype.forEach=function(e,t){if(typeof e!="function")throw new TypeError("Invalid parameter. Expected 'function', got "+typeof e);var n=Object(this),r=n.length,i=0;for(i;iThanks for signing the CSS Regions Polyfill Contributor License Agreement. Now that the legal stuff is out of the way we can accept your brilliant work!
20 | 21 | 22 |Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
94 |Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
95 |Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
97 |Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
98 |30 | CSSRegions.js is an experimental polyfill that uses JavaScript to bring CSS Regions functionality to browsers that don't support the feature. 31 |
32 | 33 |Download and link the cssregions.js script in your page.
48 | <body> 49 | ... 50 | <script src="cssregions.js"></script> 51 | </body> 52 |53 | 54 |
Use -adobe- prefixed CSS Regions syntax in your stylesheet.
56 | #content{
57 | -adobe-flow-into: myFlow;
58 | }
59 |
60 | .region{
61 | -adobe-flow-from: myflow;
62 | }
63 |
64 | There's no setup necessary. Just load the polyfill script and it will automatically parse and apply the CSS Regions syntax it finds in the page's stylesheets. If the browser supports CSS Regions, the polyfill will not be run and it will defer functionality to the native implementation.
65 | 66 |The CSSRegions.js polyfill is an experimental script that demonstrates basic CSS Regions features. It uses JavaScript to simulate the functionality as defined by the CSS Regions W3C proposal. Because it's using JavaScript, the polyfill performs slower than a native browser implementation of CSS Regions.
93 |It is not recommended to use the CSSRegions.js polyfill in a production environment as a substitute for native browser support.
94 |The polyfill works only with -adobe- prefixed CSS syntax and CSSOM properties.
-adobe-flow-into: IDENT to collect content into a named flow-adobe-flow-from: IDENT to render content from a named flowdocument.getNamedFlows() method becomes document.adobeGetNamedFlows()regionlayoutupdate event becomes adoberegionlayoutupdateregionOverset property becomes adobeRegionOversetThis experimental script has a few known limitations:
111 |The polyfill may be forced to re-layout the content by calling CSSRegions.doLayout() in a script, after making changes to the stylesheets or elements in the document.
121 | <script> 122 | // Add elements to the document 123 | // then 124 | CSSRegions.doLayout() 125 | </script> 126 |127 |
The soure code for the CSSRegions.js polyfill is available on GitHub. Code contributions are welcome, but please read the contribution guidelines before starting work.
141 |Apache License 2.0
146 |We're looking forward to hear your thougts and suggestions. You can tweet us at @AdobeWebPlatfrm or open an issue on GitHub if you spot a bug.
151 |With CSS Regions You can filter the content and surface it. Possible use cases: “breaking news” lists, terms of content summary, collecting references from a page, such as bugs or external links. This use case is documented in this document.
46 | 47 |In this last poll, we asked:
53 |In the next 10 years, will there be a serious alternative to CSS?
54 |Of over 9,000 votes so far, the majority are of the opinion that there will not be…
55 |One bizarre trend emerging in this new RWD era is desktop-browsing web designers resizing their browsers to watch the break-points change the layout. The average user never sits at their desk repetitively shrinking and expanding the browser window like a mad scientist. Yup, we’re all strange.
67 |Just gonna clear up a little thing here that I’ve seen people struggle with a few times. There are two different kinds of conditional comments for Internet Explorer that have slightly different syntaxes: Downlevel Hidden and Downlevel Revealed (microsoft docs). …
79 |
93 | 
94 | 
95 | 
96 | Using the CSS object model exposed by CSS Regions you can create regions dynamically at runtime.
69 |76 | CSS Pseudo-elements is a new proposal by Adobe to the W3C that allows multiple "before" and "after" pseudo-elements to be generated by a single element. 77 | In this example you can see how another region (the blue one) is added after the page is loaded and the CSSRegions object is created. 78 | This is a very long link! 79 |
80 |81 | Multiple pseudo-elements cover use cases collected on css-tricks.com. 82 |
83 |84 | This is a prototype JavaScript implementation to give you a feel for how the code will look like and behave. Please keep in mind that this is just experimental stuff and treat it accordingly. 85 |
86 |77 | In this example you can see how you can use the API of this library to force a new layout of the regions 78 | programmatically. You can display on/off the blue region and then click the Reflow Regions button to trigger the 79 | layout. 80 |
81 |92 | CSS Pseudo-elements is a new proposal by Adobe to the W3C that allows multiple "before" and "after" pseudo-elements to be generated by a single element. 93 | This is a very long link! 94 |
95 |96 | Multiple pseudo-elements cover use cases collected on css-tricks.com. 97 |
98 |99 | This is a prototype JavaScript implementation to give you a feel for how the code will look like and behave. Please keep in mind that this is just experimental stuff and treat it accordingly. 100 |
101 |In this example the content to be flown is composed of both TextNodes and IMGs.
73 |82 | The Forbidden City was the Chinese imperial palace from the Ming Dynasty to the end of the Qing Dynasty. It is located in the middle of Beijing, China, and now houses the Palace Museum. For almost 500 years, it served as the home of emperors and their households, as well as the ceremonial and political center of Chinese government. 83 |
84 |
85 | 
86 |
88 | Built in 1406 to 1420, the complex consists of 980 buildings and covers 720,000 m2 (7,800,000 sq ft).[1] The palace complex exemplifies traditional Chinese palatial architecture,[2] and has influenced cultural and architectural developments in East Asia and elsewhere. The Forbidden City was declared a World Heritage Site in 1987,[2] and is listed by UNESCO as the largest collection of preserved ancient wooden structures in the world. 89 |
90 |
91 | 
92 |
94 | Since 1925, the Forbidden City has been under the charge of the Palace Museum, whose extensive collection of artwork and artifacts were built upon the imperial collections of the Ming and Qing dynasties. 95 |
96 |
97 | 
98 |
100 | Notes: This text is from Wikipedia. Pictures taken by me. 101 |
102 |
78 | This is a functional test for the CSS Regions Polyfill.
79 | The first two regions are fixed width and height. The third one has fixed width and auto-height.
80 | 
81 |
83 | Using this setup we can test that the content flowing algorithm used by the polyfill works as expected. 84 |
85 |86 | It shouldn't loose any text and the nodes should be split correctly between the regions. 87 |
88 |
89 | The content used for this example while not very long it is decently complex to test various parts of the algorithm like splitting the text nodes/DOM elements
90 | between multiple regions or handling text nodes and images like this:
91 | 
92 | After any change of the algorithm we should run this test to make sure that there weren't introduced any bugs.
93 |
36 | CSS Pseudo-elements is a new proposal by Adobe to the W3C that allows multiple "before" and "after" pseudo-elements to be generated by a single element. 37 | This is a very long link! 38 |
39 |40 | Multiple pseudo-elements cover use cases collected on css-tricks.com. 41 |
42 |43 | This is a prototype JavaScript implementation to give you a feel for how the code will look like and behave. Please keep in mind that this is just experimental stuff and treat it accordingly. 44 |
45 |Using CSS Regions, a designer is able to position an image in box ‘A’ and to flow an article's content from box ‘1’ through boxes ‘2’, ‘3’ and ‘4’.
105 |Note that the second box should have two columns, and the image is not contained in the article.
106 |Box ‘4’ should auto-size to render the remainder of the article content that did not fit in the earlier boxes.
107 |See the image on the right side for an visual description of this example.
108 |
111 | 
123 | 132 | Introduction 133 |
134 |135 | This is an example that shows hot content can be made to flow between multiple regions. 136 | The image is displayed in box 'A'. The 'article' is flowed from region '1', to region '2', to region '3', and finally 137 | to region '4'. Note how the content that is laid out in 'region 1' can be subject to a different style. 138 |
139 |140 | More Details 141 |
142 |143 | This illustrates some of the features of CSS Regions. First, the ability to associate a flow of content to a set 144 | of regions and effectively getting that content to be threaded from one region to the next. 145 |
146 |147 | Then, the example illustrates the concept of 'region styling', where to content that falls into a specific region 148 | is subject to additional style rule. 149 |
150 |151 | Finally, this initial example shows that the concept of region is orthogonal to the layout of regions. This means 152 | that regions can be created and positioned using existing CSS and HTML layout (such as multi-column, flex box or 153 | grid layout). The CSS Regions specification defines how these regions can be the recipients of a 'named flow'. 154 |
155 |StyleLoader.js will collect the CSS text content of all link and style stylesheets on the page in the DOM order. When done it will run the given callback with a reference to the list of collected stylesheets.
19 | Test status: 20 | Page stylesheets are loading 21 |
22 | 23 | 31 | 32 |