Sentence Spacing
Summary
How I currently implement sentence spacing on this site. Which looks like this. ;)
Sentence Spacing
After not really being happy with my first attempt, which was to just jam more
on to the end of each sentence, I decided to look for a better solution.
Thankfully I found some helpful information on the topic, and came up with something I could live with.
I already edit these posts in NeoVim because I did not want to fall into the usual trap, of developing another CMS. So one of my main goals with this site, is to just keep everything as simple as possible, so I can focus on producing content, rather than on writing code no one will ever see, or care about.
I have switched to generating this site using the excellent hugo static site generator.
Since I now do that, I added some custom replaceRE
lines (hugo does not currently support render hooks for paragraph tags), which handle automatically wrapping my markdown paragraphs with the span
tags.
Each sentence gets a <span class="sen">
tag auto-magically now, which is far nicer than having to write html all day!
I then use (one of the bad methods from the article), by just adjusting the padding-right: of any span
with the sen
class.
This allows me to just use <p>
tags like normal for paragraph spacing, but have more control over each sentence, and where things get applied.
The upshot of all the extra formatting, is that line breaks / wrapping works correctly. In addition, any copying of the text, results in just one space, instead of two, which is also a nice touch.
Just for the record, I just think it reads better, I do not think everyone needs to switch to a wide space at the end of sentences or anything like that. TIMTOWTDI
The benefit of using hugo to generate everything is that now my content is stored in markdown format, which is basically what I wanted to do with my old site anyway. I hope to write up some more details on my hugo setup and theme in a future post. For now I am much happier with the current version.
The Meta
- Quick update to include some info about hugo
- Initial post