Print, video, sounds

Liquid multi-column layout, Movable Type

Use Firefox style rule (-moz-column-width: 300px).
Use print style sheet for a good-looking printout.		 pdf version
Multi-column_screen_shot.gif
Use Firefox style rule (-moz-column-width: 300px) to make multiple easy-to-read columns. Use a print style sheet for a good-looking printout.

Be aware I have completely given up making web pages work on multiple browsers. All I care about is that it looks right in Firefox. You will go crazy trying to make things work in Explorer. I tried to make the page look a little better in Explorer by using the Float: left rule so the text would flow around the tables. All that did was make the print engine in Firefox cut the tables in half and lose the bottom to oblivion land. I got wise and took the Float: 		left rule off the images as well. It looks good in Firefox. If you want it to look good in Explorer make the window 300 pixels wide. There is your narrow readable column.

OK, last blog I told you doing a liquid layout was down the road. But it was 4th of July weekend and I had 100 hours to waste dealing with software stupidity. When I talk about a multi-column layout, I am not talking about a web page that has a column for a post and another column for category listings and a third for other web-centric navigation. Multi-column is really about taking a big block of
Bottom of first columnmove down to the left
text and putting it into narrower columns. Newspapers and magazines have done this for 200 years.

Multi-column_screen_shot_45percent.gif

.
Thank heavens someone at Mozilla/Firefox actually cared enough about readability to make Firefox support a style rule that breaks your text into columns. You can command it to make a certain number of columns, but that does not accommodate display on a 1920x1080 TV all the way to a 480x640 tablet. By specifying the width of the columns, it will make 4 or 5 columns when the window is wide and then automatically reduce to 3, 2, or 1 column when the window is narrow.

Multi-column_screen_shot_narrow.gif
.
Needless to say, Microsoft does not support this. I am sure you are shocked, shocked to learn the gang in Redmond does not care about usability. I think Chrome and Safari has a similar style rule,
move up a little to the right move down to the left
(-webkit-column-width: 300px) that works the same. I refuse to own Apple products and I really don't feel like installing anything Google makes. I fear they will be sending a constant stream of my browser use to the Big Brother servers.

Multi-column_print_shot.gif
.
In addition to making my pages liquid by trashing Movable Types default CSS, I also created a second style sheet for print. People that have separate web pages that are print friendly are stupid. All it does is dilute your Google rank by spreading links to your site over two pages. My print stylesheet hides the beta and gamma sidebars. Having a search box on a print-out is dumb. I reserve the right to increase the width of the columns in the printed page, to make the illustrations more readable. It used to be considered a way to slow down your page loads to put in a big figure and re-size it on the page, but the benefit is your 300dpi printer will use the resolution of the big image. If you make a tiny thumbnail image, it will look crappy in the printout.

I used several methods and programs to figure this out. Essential to any style sheet work is Stylizer. It shows you a sidebar with all the CSS (cascading style sheet) commands. It displays your web page in the main window. You can fiddle and create style rules in the sidebar and
move up a little to the right move down to the left
they magically affect your page in the main window, all in real time. It is intoxicating to use and the best 100 bucks you can spend on web development.

One cool trick is to set up the template output section of the style sheet in Movable Type. You make the "link to file" the same file as it outputs.That way you can upload the CSS file from Stylizer using its internal ftp (file transfer protocol). When you open it in Movable Type, you can hack on it there if you want and do a save. Then reload the CSS in Stylizer and keep going.

Another essential tool is Kompozer. I use 7 because the open-source fork made it unusable in rev 8.0, but it looks like the guy realized everybody hated 8.0 and he actually reverted it to the old user interface of 7.0 while adding features and fixing bugs. You need to load your page into Kompozer and hit the "HTML Tags" in order to see the ridiculous div-crazy structure of a Movable Type entry page. That lets you know what rule name to create to affect the thing you want to change.

Be sure to install tree-style tab add-on in Firefox so you can grab the divider bar and sweep it left and right to watch how Firefox renders the page as the window width changes.

This go-around, I did not want to hack on the Movable Type template engines that build the page. I already changed the Header Template to add my website logo and a "contents" link on the right side.  I had changed the Footer Template to add a copyright notice. This go-around I had to add the print style sheet link into the HTML Head Template, that was
move up a little to the right move down to the left
<link rel="stylesheet"
href="http://www.rako.com/Articles/Articles-print.css"
type="text/css" media="print" />

Then I had to clone the existing stylesheet template and have it create the print CSS file I called out above in the HTML that will be at the top of every webpage in that blog.  You can use the Display: none rule in your print style sheet to disable the display of the beta and gamma sidebars. I also used it to remove the "Contents" link in the header.

So, in summary, use Stylizer, Kompozer, and Tidyui to clean any HTML you paste into Movable Type 5.0. Use the Tree-style tab in FireFox to evaluate how the page looks as you make it narrower and wider. Create a print CSS and add a little HTML to head of your web pages. That way you get a great-looking printout you could make a pdf file of, if you don't hate Adobe as much as I do. Here is the style sheet as of July 2011. The print one is pasted below it.

BODY
{
margin: 0;
}
IMG
{
border: none;
}
#header
{
background-image: url(http://www.rako.com/Articles/images/Schematic_sfw.jpg);
height: 135px;
}
move up a little to the right move down to the left
#header-name
{
height: 60px;
}
#header-name IMG
{
/*+placement:shift -120px 25px;*/
position: relative;
left: -120px;
top: 25px;
}
#header-name A
{
color: #FFFFFF;
text-decoration: none;
font-size: 1.7em;
font-family: sans-serif;
font-weight: bold;
/*+placement:shift 115px 33px;*/
position: relative;
left: 115px;
top: 33px;
}
#header-description
{
color: #FFFFFF;
text-decoration: none;
font-size: 9.9pt;
font-family: sans-serif;
height: 60px;
padding: 0 0 0 118px;
margin: 4px;
}
move up a little to the right move down to the left
#header-description A
{
color: #FFFFFF;
text-decoration: none;
font-size: 10.6pt;
font-family: sans-serif;
/*+placement:shift -293px -1px;*/
position: relative;
left: -293px;
top: -1px;
}
#content
{
margin: 0 20px 0 30px;
}
#footer
{
background-image: url(http://www.rako.com/Articles/images/Schematic_sfw.jpg);
height: 50px;
color: #FFFFFF;
font-family: sans-serif;
text-align: center;
font-weight: normal;
font-style: normal;
line-height: 3.2;
float: left;
width: 100%;
}
.asset-body
{
font-weight: bold;
font-size: 11.6pt;
max-width: 460px;
}
move up a little to the right move down to the left
#more
{
-moz-column-width: 300px;
-webkit-column-width: 300px;
}
#more IMG
{
width: 300px;
/*[disabled]float:left;*/
}
#more .eq-short
{
width: 117px;
display: block;
margin-left: auto;
margin-right: auto;
float: none;
}
#more TABLE, TH, TD
{
border: 1px solid #000000;
border-collapse: collapse;
padding: 3px 6px;
}
#more .Table-caption
{
caption-side: top;
font-weight: bold;
font-size: 1.3em;
}
#beta, #gamma
{
width: 16%;
padding: 0 0 0 2%;
border-left: 1px solid #AD1414;
}
move up a little to the right move down to the left
#alpha
{
display: inline;
float: left;
width: 80%;
}
#beta
{
display: inline;
float: right;
}
#gamma
{
display: inline;
float: right;
}

Here is the print CSS file:

BODY
{
margin: 0;
}
IMG
{
border: none;
}
#header
{
background-image: url(http://www.rako.com/Articles/images/Schematic_sfw.jpg);
height: 135px;
}
#header-name
{
height: 60px;
}
move up a little to the right move down to the left
#header-name IMG
{
/*+placement:shift -120px 25px;*/
position: relative;
left: -120px;
top: 25px;
}
#header-name A
{
color: #FFFFFF;
text-decoration: none;
font-size: 1.7em;
font-family: sans-serif;
font-weight: bold;
/*+placement:shift 115px 33px;*/
position: relative;
left: 115px;
top: 33px;
}
#header-description
{
color: #FFFFFF;
text-decoration: none;
font-size: 9.9pt;
font-family: sans-serif;
height: 60px;
padding: 0 0 0 118px;
margin: 4px;
}
#header-description A
{
display: none;
}
#content
{
margin: 0 20px 0 30px;
}
move up a little to the right move down to the left
#footer
{
display: block;
position: static;
background-image: url(http://www.rako.com/Articles/images/Schematic_sfw.jpg);
height: 50px;
color: #FFFFFF;
font-family: sans-serif;
text-align: center;
font-weight: normal;
font-style: normal;
line-height: 3.2;
float: left;
width: 100%;
}
.asset-body
{
font-weight: bold;
font-size: 11.6pt;
max-width: 460px;
}
#more
{
-moz-column-width: 300px;
-webkit-column-width: 300px;
}
#more IMG
{
width: 300px;
/*[disabled]float:left;*/
}
#more .eq-short
{
width: 117px;
display: block;
margin-left: auto;
margin-right: auto;
float: none;
}
move up a little to the right move down to the left
#more TABLE, TH, TD
{
border: 1px solid #000000;
border-collapse: collapse;
padding: 3px 6px;
}
#more .Table-caption
{
caption-side: top;
font-weight: bold;
font-size: 1.3em;
}
#beta, #gamma
{
width: 16%;
padding: 0 0 0 2%;
border-left: 1px solid #AD1414;
}
#alpha
{
display: inline;
float: left;
width: 100%;
}
#beta
{
display: none;
}
#gamma
{
display: none;
}

[Update 2018: I gave up on using a brower-speific multi-column solution. Now I use good-old tables to make columns that float left so tehy are responive to the width of the scren. The "full page" at the beginning of a post is liquid, down to the 350px that a column is. This is what you are looking at now. I aslo gave up on Movable Type's gamma and alpha divs, these are a hack to accoidate styles of blogs.
move up a little to the right move down to the left

This post is in these categories:

Categories

 border bar
Bottom of first column This is the end.