I18n - The Phoenix Trap

Last week’s article received a comment on a private Facebook group that amounted to “just use JavaScript’s built-in formatting.” So what would that look like?

#!/usr/bin/env perl

use Mojolicious::Lite -signatures;
use DateTime;

get '/' =>
    sub ($c) { $c->render( template => 'index', date => DateTime->today ) };

helper localize_date => sub ( $c, $date = DateTime->today, $style = 'full' ) {
    my $date_params = join ',' => $date->year, $date->month_0, $date->day;
    return
        qq<new Date($date_params).toLocaleString( [], {dateStyle: "$style"})>;
};

app->start;
__DATA__
@@ index.html.ep
% layout 'default';
% title 'Today';
<ul>
    <li><script>
        document.write(<%== localize_date $date %>)
    </script></li>
    % for my $style ( qw(long medium short) ) {
    <li><script>
        document.write(<%== localize_date $date, $style %>)
    </script></li>
    % }
</ul>
@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
    <head><title><%= title %></title></head>
    <body><%= content %></body>
</html>

It’s structured much like the Perl-only solution, with a default "/" route and a localize_date Mojolicious helper to do the formatting. I opted to output a piece of JavaScript from the helper on lines 11 through 14 since it could be repeated several times in a document. You could instead declare a function in the default layout’s HTML <head> on line 38 that would receive a date and a formatting style, outputting the resulting formatted date.

In the template’s list from lines 22 through 31 I decided to use JavaScript document.write method calls to add our generated code. This has a slew of caveats but works for our example here.

Worth noting is the double equals sign (<%== %>) when embedding a Perl expression. This prevents Mojolicious from XML-escaping special characters, e.g., replacing "quotes" with ", <angle brackets> with < and >, etc.. This is important when returning HTML and JavaScript code.

I also chose to use the JavaScript Date object’s toLocaleString() method for my formatting on line 12. There are other ways to do this:

Date objects also have a toLocaleDateString method. However, Mozilla has a performance note that states it’s better to use the Intl.DateTimeFormat object’s format property.
But Intl.DateTimeFormat’s browser support stands at about 70%, leaving out Safari (that’s Mac, iPhone, and iPad) and Internet Explorer users.
There are JavaScript libraries and polyfills to address these issues, but I’m trying to keep this example simple.

Note that line 10 builds the parameters for JavaScript’s Date constructor using the year, month_0, and day methods of our Perl DateTime object; month_0 because the Date constructor takes its month as an integer from 0 to 11 rather than 1 to 12. JavaScript Dates can be constructed in many ways; this seemed the simplest without having to explain things like epochs and inconsistent parsing.

Why are we using Perl DateTimes and a helper anyway? I’m assuming that our dates are coming from the backend of our application, possibly inflated from a database column. If your dates are strictly on the frontend, you might decide to put your formatting code there in a JavaScript function, perhaps using a JavaScript-based templating library.

The bottom line is to do whatever makes sense for your situation. I prefer the Perl solution because I like the language and its ecosystem and perhaps have acclimated to its quirks. The complications of JavaScript browser support, competing frameworks, and layers of tooling make my head hurt. Despite this, I’m still learning; if you have any comments or suggestions, please leave them below.

When we’re writing software for a global audience, it’s nice if we can provide it according to their native languages and conventions. Translating all of the text can be a huge undertaking, but we can start small by making sure that when we show the day and date it appears as the user expects. For example, to me it’s Tuesday, April 20, 2021; to my friend Paul in the UK it’s Tuesday, 20 April 2021 (note the difference in order), and to my other friend Gabór in Israel it’s יום שלישי, 20 באפריל 2021 (note the different direction of the text, different language, and character set).

Thankfully, we have a number of tools to assist us:

The DateTime::Locale library, which enables our Perl software to represent dates and times globally and contains a catalog of locales. It works with the DateTime library for storing our dates as objects that can be easily manipulated and formatted.
The HTTP Accept-Language header, which lets a web browser communicate to the server what natural languages and locale variants the user understands.
The HTTP::AcceptLanguage module, which helps us parse the Accept-Language header and select a compatible locale.

Our sample code uses the Mojolicious framework and is very simple; almost half of it is just HTML web page templates. You could easily adapt it to other frameworks or templating systems.

#!/usr/bin/env perl

use Mojolicious::Lite -signatures;
use DateTime;
use DateTime::Locale;
use HTTP::AcceptLanguage;

my %locales
    = map { $_ => DateTime::Locale->load($_) } DateTime::Locale->codes;

get '/' =>
    sub ($c) { $c->render( template => 'index', date => DateTime->today ) };

helper localize_date => sub ( $c, $date = DateTime->today, $format = 'full' )
{
    my $locale = $locales{ HTTP::AcceptLanguage->new(
            $c->req->headers->accept_language )->match( keys %locales ) };

    my $method_name = "date_format_$format";
    return $date->clone->set_locale($locale)
        ->format_cldr( $locale->$method_name );
};

app->start;
__DATA__
@@ index.html.ep
% layout 'default';
% title 'Today';
<ul>
    <li><%= localize_date $date %></li>
    % for my $format ( qw(long medium short) ) {
    <li><%= localize_date $date, $format %></li>
    % }
</ul>
@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
    <head><title><%= title %></title></head>
    <body><%= content %></body>
</html>

Lines 1 through 5 tell our code to use the Perl interpreter in our execution PATH and load our prerequisite modules. Note we’re using the micro version of Mojolicious, Mojolicious::Lite; later you can grow your application into a well-structured Mojolicious app. We’re also using Perl subroutine signatures, which requires Perl 5.20 or later (released in 2014).

Lines 7 and 8 preload all of the available DateTime::Locale objects so that we can serve requests faster without having to load a new locale every time. We create a hash where the keys are the locale identifiers (for example, en-US for United States English), and the values are the locale objects.

Line 10 begins our route handler for HTTP GET requests on the default / route in our web application. When a browser hits the home page of our app, it will execute the code in the anonymous sub in line 11, which is passed the controller object as $c. It’s a very simple handler that renders a template called index (described below), passing it a date object with today’s date.

Lines 13 through 23 are where the smarts of our application lie. It’s a helper that we’ll call from our template to localize a date object, and it’s another anonymous sub. This time it’s passed a Mojolicious controller as $c, a $date parameter that defaults to today, and a $format parameter that defaults to ‘full’.

Lines 14 through 18 in the helper get our locale. Working from the inside out, we get the HTTP Accept-Language header from the request on line 16, create a new HTTP::AcceptLanguage object in line 15 for parsing that header, and then match it against the keys in our global %locales hash in line 17. That matched key then looks up the appropriate DateTime::Locale object from the hash.

DateTime only allows you to set a locale at object construction time, so in line 19 we create a new object from the old one, setting its locale to our newly-discovered $locale object. Finally, in lines 21 and 22 we determine what method to call on that object to retrieve the CLDR (Common Locale Data Repository) formatting pattern for the requested format and then return the formatted date.

Finally, line 25 starts the application. To run it using the development server included with Mojolicious, do this at the command line:

$ morbo perl_date_locale.pl

There are other options for deploying your application, including Mojolicious’ built-in web server, inside a container, using other web servers, etc.

The rest of the above script is in the __DATA__ portion and contains two pseudo-files that Mojolicious knows how to read in the absence of actual templates and layouts. First on line 28 is the actual index.html.ep HTML page, which uses Mojolicious’ Embedded Perl (ep) templating system to select a layout of shared HTML to use (the layouts/default.html.ep file starting on line 39).

Lines 32 through 37 render an HTML unordered list that runs through the various formatting options available to our localize_date helper, first with the default ‘full’ formatting, and then a loop through ‘long’, ‘medium’, and ‘short’. Note that we call our helper as an expression, with an equals (=) sign after the percent (%) sign.

If you want to test different locales without changing your browser or operating system settings, you can invoke the script from the command line along with the HTTP request and headers to pass along. Here’s an example using German:

$ perl perl_date_locale.pl get -H 'Accept-Language: de' /
[2021-04-17 16:39:57.81379] [5425] [debug] [LcCSBKMVd90t] GET "/"
[2021-04-17 16:39:57.81408] [5425] [debug] [LcCSBKMVd90t] Routing to a callback
[2021-04-17 16:39:57.81610] [5425] [debug] [LcCSBKMVd90t] Rendering template "index.html.ep" from DATA section
[2021-04-17 16:39:57.81714] [5425] [debug] [LcCSBKMVd90t] Rendering template "layouts/default.html.ep" from DATA section
[2021-04-17 16:39:57.81792] [5425] [debug] [LcCSBKMVd90t] 200 OK (0.004118s, 242.836/s)
<!DOCTYPE html>
<html>
    <head><title>Today</title></head>
    <body>
<ul>
    <li>Sonntag, 18. April 2021</li>
    <li>18. April 2021</li>
    <li>18.04.2021</li>
    <li>18.04.21</li>
</ul>
</body>
</html>

And here’s Japanese:

$ perl perl_date_locale.pl get -H 'Accept-Language: ja' /
[2021-04-17 16:40:56.10840] [5478] [debug] [Wmr6cN5KUJlP] GET "/"
[2021-04-17 16:40:56.10874] [5478] [debug] [Wmr6cN5KUJlP] Routing to a callback
[2021-04-17 16:40:56.11101] [5478] [debug] [Wmr6cN5KUJlP] Rendering template "index.html.ep" from DATA section
[2021-04-17 16:40:56.11255] [5478] [debug] [Wmr6cN5KUJlP] Rendering template "layouts/default.html.ep" from DATA section
[2021-04-17 16:40:56.11360] [5478] [debug] [Wmr6cN5KUJlP] 200 OK (0.005164s, 193.648/s)
<!DOCTYPE html>
<html>
    <head><title>Today</title></head>
    <body>
<ul>
    <li>2021年4月18日日曜日</li>
    <li>2021年4月18日</li>
    <li>2021/04/18</li>
    <li>2021/04/18</li>
</ul>
</body>
</html>

A full list of supported locales is provided in the DateTime::Locale::Catalog documentation.

I hope this article has helped demonstrate that it’s not too hard to make your Perl web applications respect global audiences, if only with dates. For more on localization and Perl, start with the Locale::Maketext framework.

The Phoenix Trap

Perl, music, philosophy, etc.

Tag: I18n

Localizing dates in a Perl web application with JavaScript

Localizing dates in a Perl web application