Difference between revisions of "Visual Hierarchy Test"

From Book Owners Online
(Hello World!)
 
(Some tweaks)
Line 1: Line 1:
In CELL’s custom version of the [https://www.mediawiki.org/wiki/Skin:Chameleon Chameleon] skin, we still need to solve the [https://en.wikipedia.org/wiki/Visual_hierarchy visual hierarchy] of the heading elements. This test page will help towards that and may be discarded afterwards.  
+
<p id="lead">In CELL’s custom version of the [https://www.mediawiki.org/wiki/Skin:Chameleon Chameleon] skin, headings are styled from H1 down to H4. The styling observes a [https://en.wikipedia.org/wiki/Visual_hierarchy visual hierarchy] in which the visual salience of the heading elements decreases with increasing depth of nesting.</p>
 +
 
 +
In line with 17th century usage, no boldface is used, as boldface had not been invented yet in that period.
 +
 
 +
The hierarchy of headings is shown below.  
 +
 
  
 
=Heading 1=
 
=Heading 1=
Integer vitae lacus tincidunt erat lacinia aliquam sed sit amet quam. Suspendisse in gravida justo, a tristique enim. Cras mi purus, porta eu nulla quis, venenatis bibendum leo. Donec placerat elit vel felis sagittis interdum. In porta mollis pulvinar. Praesent facilisis velit quis venenatis dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id turpis sit amet dolor condimentum elementum at quis magna. Nulla tortor sem, scelerisque ac purus eu, tristique condimentum mi. Suspendisse blandit porta diam, sagittis efficitur mi rhoncus eget. Nulla eros mauris, pretium et placerat id, facilisis quis libero.
+
Integer vitae lacus tincidunt erat lacinia aliquam sed sit amet quam. Suspendisse in gravida justo, a tristique enim. Cras mi purus, porta eu nulla quis, venenatis bibendum leo. Donec placerat elit vel felis sagittis interdum. In porta mollis pulvinar.  
  
 
==Heading 2==
 
==Heading 2==
Line 8: Line 13:
  
 
===Heading 3===
 
===Heading 3===
Maecenas sit amet ultrices sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer tempus lacus eu massa laoreet consectetur. Nulla eget nunc vel turpis euismod dignissim. Fusce eu ipsum venenatis, pharetra lorem vitae, venenatis sem. Sed pulvinar vehicula porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tristique rutrum ipsum sed tempus. Duis tellus augue, tristique nec malesuada vel, laoreet sed purus. Pellentesque sed eleifend quam.
+
Maecenas sit amet ultrices sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer tempus lacus eu massa laoreet consectetur. Nulla eget nunc vel turpis euismod dignissim.  
  
 
====Heading 4====
 
====Heading 4====
Mauris sit amet risus diam. Aliquam consectetur blandit turpis quis laoreet. In hac habitasse platea dictumst. Vivamus hendrerit scelerisque leo a rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam non tortor nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec cursus nulla nibh, ac ultrices dui bibendum in. In ultricies odio vel ante tempor, at viverra ligula molestie. Nunc odio enim, tincidunt non lectus nec, pulvinar ullamcorper ante. In quis cursus neque, ac sagittis diam. Aliquam vel ante eu quam semper pharetra a sed quam. Quisque egestas lectus at lectus semper scelerisque. Pellentesque rhoncus vel mi eget rhoncus.
+
Mauris sit amet risus diam. Aliquam consectetur blandit turpis quis laoreet. In hac habitasse platea dictumst. Vivamus hendrerit scelerisque leo a rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam non tortor nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec cursus nulla nibh, ac ultrices dui bibendum in.
 
 
Aliquam ullamcorper sollicitudin justo, eu posuere arcu faucibus eu. Quisque augue dolor, ullamcorper ut eros vel, tempor rhoncus magna. Donec eleifend rutrum ante et tempus. Morbi sed maximus lacus. Cras vulputate orci ut rutrum sollicitudin. Aenean enim augue, malesuada vel congue vitae, dignissim in justo. Curabitur pellentesque, massa vel lacinia mollis, sapien metus consectetur felis, et elementum dui turpis ac ex. Praesent non ultrices magna. Etiam a neque nisi. Vivamus quam ex, vulputate vitae ultrices nec, elementum at lacus.
 
 
 
Sed volutpat sem vitae convallis luctus. Integer convallis congue molestie. In non eros elementum, convallis risus eget, feugiat odio. Etiam ornare arcu nec magna pharetra cursus. Maecenas mattis nulla nec mi sollicitudin pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
 

Revision as of 03:21, 13 February 2020

In CELL’s custom version of the Chameleon skin, headings are styled from H1 down to H4. The styling observes a visual hierarchy in which the visual salience of the heading elements decreases with increasing depth of nesting.

In line with 17th century usage, no boldface is used, as boldface had not been invented yet in that period.

The hierarchy of headings is shown below.


Heading 1

Integer vitae lacus tincidunt erat lacinia aliquam sed sit amet quam. Suspendisse in gravida justo, a tristique enim. Cras mi purus, porta eu nulla quis, venenatis bibendum leo. Donec placerat elit vel felis sagittis interdum. In porta mollis pulvinar.

Heading 2

Pellentesque tempus in leo nec efficitur. Suspendisse rutrum nibh id velit egestas, bibendum scelerisque mauris ullamcorper. Sed dolor ipsum, interdum sit amet mauris sed, viverra luctus justo. Aenean consectetur tortor lacus, ac hendrerit neque semper a.

Heading 3

Maecenas sit amet ultrices sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer tempus lacus eu massa laoreet consectetur. Nulla eget nunc vel turpis euismod dignissim.

Heading 4

Mauris sit amet risus diam. Aliquam consectetur blandit turpis quis laoreet. In hac habitasse platea dictumst. Vivamus hendrerit scelerisque leo a rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam non tortor nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec cursus nulla nibh, ac ultrices dui bibendum in.