Org-Mode CSS May 13th, 2010
Patrick Stein

The color scheme here is a bit me-centric, but I am mostly posting it because I find the typography pleasing…. In my .emacs file, I have set up the org-export-headline-levels to two and the org-export-html-style to the following:

;;; .emacs.lisp
(setq org-export-html-style
      "<style type="text/css">#<:use "style.css"></style>")

# style.css
<<basic body style>>
<<header style>>
<<content style>>

The basic body has no margin and a pleasing (to me) khaki color.

# basic body style
body {
   background-color: #999966;
   margin: 0em;
}

The headers are carefully sized to try to take up a multiple of 1.4em with a consistent bottom margin.

# header style
h1 {
   font-size: 2.0em;
   margin-top: 1.9em;
   margin-bottom: 0.3em;
}
h2 {
   font-size: 1.5em;
   margin-top: 2.4em;
   margin-bottom: 0.3em;
}
h3 {
   font-size: 1.25em;
   margin-top: 1.25em;
   margin-bottom: 0.3em;
}

The main body is a pale yellow color with vertical borders. It’s got a decent font (the one that I have by default for my browser) with a slight tweak to the letter spacing and a big tweak to the leading. It keeps from getting too wide and stays centered. Oh, and I don’t skip space before lists.

# content style
div#content {
   background-color: #ffffcc;
   border-left: double #333300 3mm;
   border-right: double #333300 3mm;
   font-family: Times, serif;
   letter-spacing: 0.075em;
   line-height: 1.4;
   margin: 0em auto;
   padding: 2em;
   width: 45em;
}
ul {
   margin: 0;
}

Here is some sample output.

Can We Refluidize CSS? April 28th, 2009
Patrick Stein

I mentioned earlier that CSS makes each object responsible for how it flows in the layout rather than making the container responsible. So, what can be done?

Take a look at this very site. All of the widgets on the left are floating over there. If you narrow your browser window (or bump up your text size), they will eventually fall into a single column. Narrow further and they will fall below this text.

That’s 80% of what I wanted out them. There are weird artifacts though caused by the different widget sizes. To accomplish this, I not only had to float each widget, but I had to float the main column as well.

What I really wanted was a container that would flow things for me instead making me flow each item (poorly). It seems I should be able to specify a container that adds objects top-to-bottom-then-left-to-right keeping the minimum needed height for any addition. So, in adding a <div> to this container it would:

  • insert it below the last inserted item if it need not lengthen itself to do so
  • otherwise, insert it to the right of the last items as high up as it will go if it need not widen itself to do so
  • otherwise, lengthen itself enough to place it below the rest of the contents

It may be as simple as preferred-width and -height attributes on the container, a flow-order: top-bottom-left-right;, and judicious use of maximum-width and -height.

Nobody’s Perfect

This wouldn’t solve every fluidity problem one might like to tackle. But, it would make many of them much simpler. No one would ever switch apartments if each piece of furniture got to say where it belongs on the moving truck.

The Fluidity-Thwarting Flaw in CSS April 28th, 2009
Patrick Stein

I am the one who decides how big to make my browser window. Web sites have a hard time coming to grips with that. There is a mythical minimum browser size.

When I am browsing, I don’t want to have to care.

When I am designing a site, I don’t want the user to have to care.

CSS is my enemy

All of the trouble using floats for columns all spring from a fundamental flaw in CSS:

How items flow with CSS is a property of the object instead of its container.

Now, maybe I am being a bit harsh in calling it a fundamental flaw. For all I know, it was a conscious choice. My guess though is that it seemed natural to people who wrote browsers in the early 90’s (<blink> tags and all).

RSS Feeds

l