{"id":342,"date":"2013-10-15T11:20:38","date_gmt":"2013-10-15T09:20:38","guid":{"rendered":"http:\/\/blogs.igalia.com\/jfernandez\/?p=342"},"modified":"2013-10-15T11:20:38","modified_gmt":"2013-10-15T09:20:38","slug":"css-regions-and-selection","status":"publish","type":"post","link":"https:\/\/blogs.igalia.com\/jfernandez\/2013\/10\/15\/css-regions-and-selection\/","title":{"rendered":"CSS Regions and Selection"},"content":{"rendered":"

Back in early June, Adobe<\/a> and Igalia<\/a> announced a collaboration to work on the CSS Regions<\/em> and CSS Shapes<\/em> W3C standards. Our first challenge has been to improve the Selection<\/em> use cases when using complex layout models, like CSS Regions.<\/em><\/p>\n

The CSS Regions<\/em><\/a> model allows content to flow across multiple areas called Regions<\/em>. This new approach offers web content designers a way to build richer and more complex layouts, mapping content with specific visual areas of a document. Defining different Flow Threads<\/em> with multiple Regions,<\/em> associating them to specific content, and applying different styles\u00a0<\/em>to a set of Regions<\/em> is very powerful in terms of design and user experience. If you are interested, here<\/a> you can find some examples of what is possible with CSS Regions<\/em>.<\/p>\n

But having this flexibility in web design requires overcoming quite a few technical challenges. The current implementation of CSS Regions<\/em> in WebKit<\/em> changes the way the Render Tree<\/em> is created from the DOM Tree. This poses the challenge of making selection work with regions since selection is DOM based<\/strong>. Given its importance and frequent use, improving the interaction of selection and CSS Regions<\/em> has been the main goal of our collaboration.<\/p>\n

The W3C selection specification<\/a>, which has not been updated since the last year, does not address the complexities introduced by new layout modules, like CSS Regions, CSS FlexBox <\/a><\/em>and CSS Grid Layout<\/em><\/a> module . We found out very quickly that selection had many issues, with respect to both visual appearance and selected content. We have created a tests suite<\/a> to evaluate the different use cases of selection with CSS Regions<\/em>.<\/p>\n\n\n\n
\n

\"test2\"<\/a>
Selected content does not match the highlighted area.<\/figcaption><\/figure><\/td>\n
\n

\"test1\"<\/a>
Selection direction issues<\/figcaption><\/figure><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Let\u2019s start with a very simple description of the concept of Selection Direction<\/strong>, which consist of the following points:<\/p>\n