https://bugzilla.wikimedia.org/show_bug.cgi?id=29256
Web browser: ---
Bug #: 29256
Summary: text on wide screen is hard to read : need columns
Product: MediaWiki
Version: unspecified
Platform: All
OS/Version: All
Status: NEW
Severity: normal
Priority: Unprioritized
Component: Page rendering
AssignedTo: [email protected]
ReportedBy: [email protected]
Classification: Unclassified
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
--
Configure bugmail: https://bugzilla.wikimedia.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.
You are on the CC list for the bug.
_______________________________________________
Wikibugs-l mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/wikibugs-l
