Numeric Value Humanization Without Plugins

Numeric Value Humanization Without Plugins

This article was tagged with: Jekyll

There are 680 words in this article, and it will probably take you less than 4 minutes to read it.

This article was published 2023-08-28 00:00:00 -0400, which makes this post and me old when I published it.

When I was building my statistics page I wanted to have a thousands place number separator, which is a comma (“,”) in the US. This a task sometimes referred to as “humanization”. I thought that this would be an easy task, but for some reason there is no built in Liquid function to do value humanization. There are plugins to do this, such as jekyll-humanize by Ryan Morrissey and Liquid-Thousands-Separated-Filter by Matt Gemmell. However, since I am in the GitHub Pages Jekyll sandbox, I am unable to use external plugins that are not already bundled into the GitHub Pages environment. While plugins would certainly make it easier, I knew that it wouldn’t be impossible to implement in Liquid. With that being said, I had no idea how I would implement it in Liquid.

I first found Daniel Vorhauer’s gist which linked to John Teske’s gist whose simplistic approach was just what I needed.

{% assign digits = include.number | split:'' %}{% for digit in digits %}{% assign threeFromEnd = digits.size | minus:forloop.index | modulo: 3 %}{% if threeFromEnd == 2 and forloop.index != 1 %}{{ digit | prepend: ',' }}{% else %}{{ digit }}{% endif %}{% endfor %}

When I was using John’s snippet I first noticed how it looked minified, but after trying to indent the code to make it more readable I realized that it was because it affected whitespace. I begrudgingly accepted this since it was in an include tag, but it wasn’t until I was reading the Liquid documentation another day that I found out about whitespace control. I think I may have been too gung-ho with the - operator, but it works, but I think I’m just going to keep it.

{%- assign digits = include.number | split: '' -%}
{%- for digit in digits -%}
    {%- assign threeFromEnd = digits.size | minus: forloop.index | modulo: 3 -%}
    {%- if threeFromEnd == 2 and forloop.index != 1 -%}
        {{ digit | prepend: ',' }}
    {%- else -%}
        {{ digit }}
    {%- endif -%}
{%- endfor -%}

This process has opened my eyes to a whole method of approximating functions with includes in Jekyll, as I found out after reading Hamish Willee’s article. In his article, he mentions how “Comments, space and newlines in functions are part of the output,” so I wonder how many people know about the whitespace control features in Liquid. This is probably a common phenomenon because I only know as much Liquid as I need to know, which is to say, as much as is needed to accomplish what I want to do. It was only by sheer coincidence that I found the Liquid documentation page on whitespace control.

Other Jekyll Articles

Creating a Flexible Permalinking System in Jekyll

How to create and maintain a flexible permalinking system in Jekyll for your posts.

Using jekyll-feed + XSLT with GitHub Pages

A guide on how to set up and use the jekyll-feed plugin on GitHub Pages to create a stylized feed.xml for RSS feeds.

Post and Author Age Without Plugins

How to display post and author age in Jekyll via JavaScript.

Word Count Statistics Without Plugins

Word Count Statistics Without Plugins

Getting Posts by Tag

How I improved my Liquid code in Jekyll to display posts by tag.