Column arrangement

In printed newspapers, text has traditionally been arranged in columns. This prevented lines from becoming too long on the wide sheets of paper. Super long lines are not desirable as they would require movements of the head or arms just to read a single line and because they would make finding the start of the next line difficult.

Webpages on computer screens are different. They are often not as wide. Besides, you can use arbitrarily much vertical space by scrolling down. It is hence not necessary and most of the time not helpful to break stories on webpages into columns. But there are a few exceptions. A long list of names uses only a small portion of the available horizontal space while it requires a lot of scrolling from the reader. Arranging the names in columns can use the available space better.

So, Aneamal offers a mark to arrange a block into columns. It also offers a mark to exempt a block within a region that uses columns from that column arrangement.

This page is about dividing a single chunk of text into columns. Organizing the overall webpage layout with different areas such as a main content area and a sidebar for navigation next to it is a separate topic not discussed here.

How to

Mark a block with two space-separated colons : : to arrange it in columns. The mark can be either placed in an otherwise empty line above the block or at the start of the first line of the block, separated from it by a space.

Three consecutive colons ::: mark a block as spanning columns. Use it when a block such as a heading shall break out of the column arrangement in a larger region of the page that is otherwise displayed in columns.

Example

The example shows how the content of a linked file gets arranged in columns.

: :
[a]->/stuff/alphabird.nml
  • ani
  • buzzard
  • chiffchaff
  • dodo
  • egret
  • fieldfare
  • gannet
  • hoopoe
  • ibis
  • jackdaw
  • kiwi
  • leaflove
  • mallard
  • nightjar
  • ostrich
  • peacock
  • quetzal
  • robin
  • starling
  • toucan
  • uhu
  • vulture
  • willet
  • xeme
  • yellowhammer
  • zebra finch

Try changing the window size to see how the number of columns varies with the available horizontal space.

For developers

When Aneamal is translated to HTML, a block marked for column arrangement or to be exempt from it gets wrapped in an HTML div element with a class attribute whose value is listed in the following table:

mark class attribute value
: : _columns
::: _row

In case of heading blocks that are wrapped in an HTML summary or hgroup element anyway, the classes are added to these elements instead of to a div.

Required stylesheet

Declarations for the classes are necessary in CSS in order for column arrangement and exemption marks to work. Here are possible rules in the @look.css file:

._columns {
	columns: 3 14em;
}
._row {
	column-span: all;
}

The CSS declaration columns: 3 14em tells browsers to arrange content in at most three columns which must be at least 14em wide. Browsers will create as many columns as possible while respecting these constraints.

See also