Wikimedia Bugzilla is closed!

This bug follow a discussion with Santosh during the Berlin 2011 hackaton.

On a wide screen, the text is a bit hard to read. Newspapers use multiple columns layout to make it easier for the reader. Technically, we could apply a two columns layout (with CSS3 'column-count') whenever the screen is too wide.

Currently, text belonging to a section is not wrapped in an element which makes it hard to interact with the text on a per section basis. The enhancement can be also be the root for other enhancements:
- hiding section text by default with a button to make it appears
- only show the first section and add previous / next link to read subsequent sections (much like turning page of a book).

Anyway, given the wikitext:
 == head 1 ==
 section 1 text
 section 1 more text
 === subhead 1.1 ===
 sub section text
 == head 2 ==
 section 2 text

We currently generate HTML which roughly looks like:
 <h2>head1</h2>
 <p>section 1 text</p>
 <p>section 1 more text</p>
 <h3> subhead 1.1 <h3>
 <p>sub section text</p>
 <h2> head 2 </h2>
 <p>section 2 text</p>

The idea would be to wrap all the text which appears between two headers.

First proposal terminate the section regardless of the heading level:

 <h2>head1</h2>
 <div id="???" class="mw-text-section">
   <p>section 1 text</p>
   <p>section 1 more text</p>
 </div>
 <h3> subhead 1.1 <h3>
 <div id="???" class="mw-text-section">
   <p>sub section text</p>
 </div>
 <h2> head 2 </h2>
 <div id="???" class="mw-text-section">
   <p>section 2 text</p>
 </div>

This is suitable to apply a 2 column layout with the following CSS:

 .mw-text-section {
   column-count: 2;
   -moz-column-count: 2;
   -webkit-column-count: 2;
 }

Each section could be layed out like a newspaper page, but any new heading start a new 2 columns section.


Second proposal, wrap sub sections too and keep track of the nesting level:

 <h2>head1</h2>
 <div id="???" class="mw-text-section-1">
   <div id="???" class="mw-text-section-2">
     <p>section 1 text</p>
     <p>section 1 more text</p>
   </div>
   <h3> subhead 1.1 <h3>
   <div id="???" class="mw-text-section-2">
     <p>sub section text</p>
   </div>  <!-- end of subsection 1.1 -->
 </div>  <!-- end of section1 -->
 <h2> head 2 </h2>
 <div id="???" class="mw-text-section-1">
   <p>section 2 text</p>
 </div>

By using mw-text-section-1, each <h2> section can still be seen as a page:

.mw-text-section-1 {
   column-count: 2;
   -moz-column-count: 2;
   -webkit-column-count: 2;
 }

The <h3> sections would be subtitle inside the column layout.


TODO : submit layout examples