💾 Archived View for mozz.us › journal › 2020-03-03.gmi captured on 2021-12-03 at 14:04:38. Gemini links have been rewritten to link to archived content

View Raw

More Information

⬅️ Previous capture (2020-09-24)

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

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.

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