The big picture is fairly simple: figure out which Tinderbox attributes correspond to which CSS properties. This meant a set of test notes:

... arranged in a rich map view where I can tweak things and see (through "Get Info" on the notes) which attributes change:

With that setup, I can have "Get Info" open and watch all the map-related attributes change as I move a note or change its color or play with fonts:

I got the following as rough equivalencies. The ones in italics didn't fully work in my experiment.

For the Map View note (rather than the child-notes in the map view):

• title's background-color: TitleBackgroundColor
• title's font-family: TitleFont
• title's text color: TitleForegroundColor
• map area's background-color: MapBackgroundColor

For the child-notes in the map view:

• CSS: Tinderbox
• top: Ypos - didn't work because of units, see below
• left: Xpos - units again
• width: Width
• border-width: Border
• border-color: BorderColor - Tinderbox gives white text if the color is dark, black text if the color is light. There's no way to automate that cleanly in export or CSS
• background-color: Color
• font-family: NameFont
• color: NameColor

Once I figured out what made what, I built the styles but put in export codes where the values should be. Word to the wise: don't forget that Tinderbox export codes can be listed with or without a trailing carat. These two are equivalent:

<p>^get(FunnyNumber) the number comes out</p>

<p>^get(FunnyNumber)^ in both of these cases</p>

However, if you want something to immediately follow the export code, you must use the trailing carat. Otherwise Tinderbox doesn't know where the export code ends:

<p>^get(FunnyNumber)no number</p>

<p>^get(FunnyNumber)^number</p>

So far I have two export templates. One, "mapMyChildren.html" which is called for each note, and which generates the html page and the 'map view'. Inside of that is this code:

^justChildren(mapMe.html)^

... which calls another template ("mapMe.html") to make the <div> for each note. (Right-click or control-click and choose "save link as" or "download link as" to get those files, btw.)

However, as you'll note from this browser window screenshot, all is not well:

The problem is that Tinderbox's X and Y coordinates aren't in pixels, inches, or ems-- the units that CSS understands. Trial and error showed that Tinderbox's units are about 3em. But you can't do math in an export, so there's no way to say:

^get(Xpos * 3)^em;

I think there's a way around it with Javascript, and if it works it'll be nifty: you'll be able to zoom in and out with the Javascript multiplying the dimensions as you go. However, as is always the case with Javascript, I anticpate this a) taking forever and a day to code, b) taking another half-forever to make cross-browser, and c) making a Jackson Pollack painting out of my currently Mondrian code.

In other words, don't hold your breath until it's done. I'm going back to CSSimplicity later this week.

There are some other things that this could use: CSS properties to make the text wrap at a fixed note width and not to extend the div if the text is too long for a fixed height. Borders, which Tinderbox handles in a tricky way.

But, for now? I'm elated that I got this much to work in about 45 minutes. It's a testament to the transparency of Tinderbox.