💾 Archived View for mozz.us › journal › 2020-03-03.gmi captured on 2022-03-01 at 15:14:06. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

Site Update: "text/gemini" Formatting Changes

Published 2020-03-03

Changes to gemini://mozz.us

Another spec change, another site update...

I made pass through all of my hosted gemini documents and updated the text formatting. Overall, it wasn't too hard this time around.

I re-instated the ``` backticks for code blocks and ascii art (I'm quite glad to see this make it into the spec!).
I converted the bullet point character from "-" to "*".
I standardized some of the "#" header blocks across different sections of the site.

Here are some examples of pages that highlight the strength of the new format

gemini://mozz.us/diagnostics/2020-01-08/notes.gmi

gemini://mozz.us/files/aaatutorial.gmi

gemini://mozz.us/journal/2019-08-20_documents_and_directories.gmi

I also tweaked the layout of my homepage a bit. The goal is to emphasize original content, and de-emphasize random documents and tech demos.

Changes to https://portal.mozz.us

I also updated my Gemini-HTTP proxy to render the new document format. It was surprisingly fun to work out how to implement the CSS while remaining faithful to the gemini specification.

Here's a quick outline of what I came up with. Setting the "white-space: pre-wrap" property for <p> elements preserves line breaks, while still wrapping long lines using a proportional font. Setting the margin to 0 removes any extra whitespace around elements like headers. I also lowered the font sizes for headers to be a bit less dramatic.

CSS

.gemini > * {
	margin: 0;
}
.gemini > p {
	white-space: pre-wrap;
}

HTML

<div class="gemini">
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <h3>Header 3</h3>
  <ul><li>Bullet point</li></ul>
  <pre>
      Preformatted text blocks will
      preserve hard line breaks.
  </pre>
  <p>
      Any other text will be placed
      inside of a paragraph element
      with a proportional font.
  </p>
</div>

Here's a test file that I used to validate the document rendering:

/files/text_formatting_test_20200303.gmi