Multi-column Sample
Dictionary Layout
The following example shows how to create a basic multi-column
document with two columns, balanced content and a small gap.
- Peace, n. 1. Calm, repose, quiet, tranquillity, stillness, silence.
- 2. Amity, concord, harmony, truce, ARMISTICE.
- Peaceable, a. 1. Peaceful, pacific, free from war.
- 2. Gentle, mild, amicable, friendly, disposed to peace, not quarrelsome.
- 3. Quiet, tranquil, placid, unmoved, undisturbed, serene.
- Peaceful, a. 1. Quiet, calm, still, undisturbed, placid, tranquil, serene.
- 2. Mild, gentle, kindly, friendly.
- Peace-maker, n. Mediator, intercessor.
- Peace-making, a. Conciliatory, mild, appeasing.
- Peace-offering, n. 1. Atonement, satisfaction, amends, reparation, atoning sacrifice.
- 2. Mediation, olive-branch, intercession.
- Peak, n. Top (of a mountain), summit, crest, crown, pinnacle.
- Peak, v. n. 1. Grow thin or lean, become emaciated.
- 2. Sneak, make a mean figure.
- Peaked, a. Pointed.
- Peal, n. Blast, burst, blare, clang.
- Peal, v. n. Resound, echo, re-echo, boom, thunder, roar.
- Pea-nut, n. Ground-nut, earth-nut (Arachis hypogæa).
- Pearlash, n. Sub-carbonate of potassa (impure), calcined potash.
- Pearl-powder, n. Pearl-white.
- Pearl-white, n. Pearl-powder, sub-muriate of bismuth.
- Pearly, a. 1. Abounding in pearls.
- 2. Clear, pure, transparent, nacreous.
- Peasant, n. Rustic, countryman, hind, swain.
- Pebble, n. Stone (of small size), pebble-stone.
- Pebble-stone, n. Pebble.
- Peccability, n. Frailty, infirmity, weakness, liability to sin.
- Peccable, a. Frail, weak, imperfect, erring, sinning, liable to sin.
- Peccadillo, n. Petty fault, slight offence.
- Peccant, a. 1. Sinning, erring, guilty, criminal.
- 2. Morbid, malignant, corrupting, corroding.
- Peculation, n. Embezzlement.
- Peculiar, a. 1. That specially pertains, that belongs exclusively.
- 2. Singular, particular, characteristic, special, exceptional, rare, not common, not general.
- Peculiarity, n. Individuality, idiocrasy, idiosyncrasy, characteristic, speciality, singularity.
- Pecuniary, a. Monetary, financial.
- Pedagogue, n. [A contemptuous term.] Schoolmaster, teacher.
- Pedant, n. Pretender to learning.
- Pedantic, a. Conceited, pragmatical, vain of knowledge, ostentations of learning.
Excerpt from "Dictionary of English Synonymes" by Richard Soule via Project Gutenberg:
http://www.gutenberg.org/files/38390/38390-h/38390-h.htm
div.dictionary{
height 6in; /* if not set the box shrinks to the balanced column's height */
column-count: 2; /* defines two columns */
column-gap: 0.25in; /* defines the gap width */
...
}
Journal Layout
In this example the columns are defined by width and their content
is laid out to fully fill each column before beginning the next
rather than balancing all column heights equally. The gap is a
little bigger, to leave room for written side-notes.
Monday, 8th.
Fresh Breezes and Cloudy weather the most part of these 24 hours. At 10 a.m. weighed and came to sail; at Noon the South Foreland bore North-East 1/2 North, distant 6 or 7 Miles. Wind West by North, North-West.
Tuesday, 9th.
Gentle breezes and Cloudy weather. At 7 p.m. the Tide being against us, Anchored in 13 fathoms of Water; Dungeness South-West by West. At 11 a.m. Weighed and made Sail down Channel; at Noon, Beachy Head, North by East 1/2 East, distant 6 Leagues, Latitude observed 50 degrees 30 minutes North. Wind North-West to North.
Wednesday, 10th.
Variable: light Airs and Clear weather. At 8 p.m. Beachy Head North-East by East, distant 4 Leagues, and at 8 a.m. it bore North-East by North, 9 Leagues. Found the Variation of the Compass to be 23 degrees West; at Noon the Isle of Wight North-West by North. Wind West by North, North-East by East.
Thursday, 11th.
Light Airs and Clear weather. At 8 p.m. Dunnose North by West 5 Leagues, and at 4 a.m. it bore North-North-East 1/2 East, distant 5 Leagues. Wind Variable.
Excerpt from "Captain Cook's Journal, First Voyage", Chapter 1 "England to Rio Janeiro" by James Cook via Project Gutenberg:
http://www.gutenberg.org/files/8106/8106-h/8106-h.htm
div.script{
width: 5.5in;
height: 6in; /* if not set columns will use space until end of the page */
column-width: 2.5in; /* define column width, makes two for this box */
column-gap: 0.5in;
column-fill: auto; /* disables balanced column layout */
}
Restaurant Card with Spanning Content
The following example shows an advanced layout with rules between
columns and a headline and an image spanning the columns.
Sushi
Sushi (すし, 寿司, 鮨, 鮓, 寿斗, 寿し, 壽司)
is a Japanese food consisting of cooked vinegared rice
(shari) combined with other ingredients (neta).
Neta and forms of sushi presentation vary, but the ingredient
which all sushi have in common is shari. The most common
neta is seafood.
Maki Sushi
- Avocado Maki
avocado, rice and nori (dried seaweed)
- Kappa Maki
cucumber, rice and nori (dried seaweed)
- Sake Maki
salmon, rice and nori (dried seaweed)
- Tekka Maki
tuna, rice and nori (dried seaweed)
Nigiri Sushi
- Sake Nigiri
salmon, rice
- Ebi Nigiri
shrimp, rice
- Maguro Nigiri
tuna, rice
Excerpt "Sushi" from Wikipedia:
http://en.wikipedia.org/wiki/Sushi
div.card{
column-count: 2;
column-gap: 0.25in;
column-rule: thin solid gray; /* adds a thin gray line between columns*/
...
}
div.card h1 {
column-span: all; /* heading spans all the columns */
...
}
div.card img{
display: block;
width: 100%;
margin-top: 0.25in;
margin-bottom: 0.25in;
column-span: all; /* picture spans all the columns */
...
}
Article with Single-Content Columns
This simple example shows how content like a heading or image can
be made sole content of a column using manual column breaks.
United States Capitol
The United States Capitol is the meeting place of the United
States Congress, the legislature of the federal government of
the United States.
Located in Washington, D.C., it sits atop Capitol Hill
at the eastern end of the National Mall. Though it has never
been the geographic center of the federal district, the Capitol
is the origin by which both the quadrants of the District are
divided and the city was planned. Officially, both the east and
west sides of the Capitol are referred to as "fronts."
Historically, however, only the east front of the building was
intended for the arrival of visitors and dignitaries.
Like the federal buildings for the executive and judicial
branches, it is built in the distinctive neoclassical style and
has a white exterior.
Excerpt "United States Capitol" from Wikipedia:
http://en.wikipedia.org/wiki/United_States_Capitol
div.article{
height: 2.5in;
column-count: 5;
...
}
div.article h1{
break-after: column; /* explicit break ensures heading has own column */
...
}
div.article img {
display: block;
height: 100%; /* makes the picture as high as the column it's in */
margin: auto;
break-before: column; /* explicit breaks ensure picture has own column */
break-after: column;
}
