Pardon my dust

While I experiment with Micro.Blog and the Tufte Theme

I will be editing and republishing this same post several times during the day. Apologies in advance!

Update: experiments have concluded. Thanks for your patience!

The Micro.Blog plan:

  • What are the limits of more?
  • Styling things in the timeline vs title vs blog home page vs post page

The Tufte theme plan:

  • Try out the side and margin note features
  • Use different variations of figure
  • Blockquote and epigraph
  • Does cite do anything other than styling?
  • div and section
  • subtitles, i.e. ##
  • other usual markdown styling choices

Other experiment

  1. a hand written note, with text extracted via iOS camera
  2. alt text, just the img tag, or also via markdown?

The goal is to have a better understanding of this and to leave some notes on this post for my future self.

That’s a lot of stuff up there. I reserve the right to break it up over a few days.

Results

More tag

If the post has a title, that’s all you see in the timeline. On your own blog home page, everything up to the more tag will show up. In the RSS feed, the whole post appears whether there is a more tag or not.

Markdown

This is what bold looks like. Bold is **bold**.

This is what italic looks like. Italic is _italic_.

This is what strong looks like. Strong is <strong>strong</strong>.

This1 is what emphasized looks like. Emphasized is <em>emphasized</em>.[^1]

Certainly it is worth reviewing the Tufte-css page that is referred to in our own MB Tufte theme page.

The author of the Tufte-css page points out that it will aid the reader if you stay consistent between either using the headers, or the newthought tag. Don’t use both.

Cite

Here I am going to demonstrate a citation: E. Tufte, Beautiful Evidence. That is <cite>some text</cite>.

Blockquote vs Epigraph vs markdown

This is a markdown > block quote.

-someone said it

and

This is a Tufte style blockquote.

Epigraph is not a thing, per se. It is what the blockquote is called in Tufte-speak. (Is this paragraph very wide?)

The below are epigraphs. Note that they are in italic.

This is not compact. What is a pullquote?

there is not source

A pullquote is a key phrase, quotation, or excerpt that has been pulled from an article and used as a page layout graphic element. This was not compact.

Note: the compact mode doesn’t appear to work, since then things become very wide.

Figure

small mars A small picture of a picture of Mars. A medium long description of a picture of a picture of Mars.

Is there is a figure over there? Yes, there is.

Another paragraph. Above here should be a small picture in the margin. There should be a regular sized picture below here.

A picture of a picture of Mars. A very long description of a picture of a picture of Mars on my wall at home in my office.

medium mars

There is a paragraph of text. Below this text should be the same figure but even bigger.

big mars
BIG Mars picture. A very large picture of a picture of Mars.

There should be a big picture above this.

A quick note about img alt and title fields: setting the alt field in the figure shortcode will set it for the image. The title field is used exclusively for the figure caption, and it is not replicated in the img tag, which is how the XKCD site gets those witty commends when you right click a comic.

Edit 2022-05-15: The photos page will not collect images that are added with the figure shortcode. One hack that works, but I don’t know the other consequences of, is to add the images again with html img tags, but hide them. Just get the html from your uploads.This can be accomplished by adding a style="display: none; to the duplicated image. Take a look at the source for this post and you’ll see what I mean at the bottem of the body.

Bonus Poetry

In an effort of science, I have copied the text from the image below using the iOS text tool. While it wasn’t perfect, it was something. (Why is this paragraph so wide?)

Below here
is a picture
of these
very
Some
worels. but
in my own hand.
Today!
Tokay! hope that my handwriting is
cleer enough
tut I lant has to just
rewrite the whole massge.. That’s enough
for this fast I think. In La La

Pretty neat, huh?

A handwritten note iOS produces some garbled poetry, but I can work with it.

Not the greatest interpretation of what I actually wrote above here.

Conclusion

I think for now, I am done.

Postscript

Is this in sans?

Note: I had to “edit css” and add .sans { font-size: 133%; } to get this to look right in the size.

Hypothesis: section shortcodes need space around them. The templating engine is putting p tags in strange places.

Is this paragraph the correct width or is the section not actually closed here? That is the real question. I think it should also be in a serif font.

Red font with a html span tag and the danger class.

Test.


  1. Footnote from the body, it does work. ↩︎

J. Garo @garo