Introduction

I have always been fascinated by how the language of comics expresses the flow of time indirectly—through static images.

How?

As a rule of thumb, it combines two basic but core principles:

• space = time (space equals time)
• time ↔ reading (time is related to the reading experience)

Before detailing these principles, it’s important to note that in any piece of sequential art¹, these two principles cannot be clearly separated. Instead, they combine seamlessly, forming a gestalt.

Space = time

Let us focus on the first principle: space = time. The language of comics expresses the flow of time by sequencing space. It sequences space at three different levels, from highest to lowest:

• space/time is structured in a sequence of pages
• space/time is structured in a sequence of panels within a single page
• space/time is structured in a sequence of elements within a single panel

Sequence of pages

How is space/time structured in a sequence of pages?

In a sequence of pages, each of the pages (usually) works as a macro unit of meaning that moves the story and action forward.

Let us look at a sequence of pages from the manga Dragon Ball by Akira Toriyama as an example. In this sequence, Gohan—Goku’s son—counterattacks to prevent Cell—the mashed up villain—from destroying Earth.

If we go through the above sequence and roughly time how much each page covers:

We can conclude that the entire sequence spans a time of more or less ∼50 seconds.

As mentioned before, we should always keep in mind that these ∼50 seconds are not a product of just the sequence of pages in itself, but rather the outcome of mixing the two principles space = time (at the level of pages, panels, and elements) and time ↔ reading in different quantities.

Sequence of panels

How is space/time structured in a sequence of panels within a single page?

In a sequence of panels, each panel (usually) represents a distinct event in time, and each gutter—the void space between panels—advances time forward from one panel to the next.

The amount of time a gutter represents is derived from the events in the adjacent panels it separates. The further apart these events are in time, the longer the time the gutter expresses.

Let us look at a sequence of panels from the graphic novel The Dark Knight Returns by Frank Miller as an example. In the spread, Bruce Wayne—also known as Batman—has a flashback where he remembers his parents being killed during an armed robbery.

In the above spread from The Dark Knight Returns, the events represented in the panels are quite close to each other in time.

This results in the time expressed by each gutter being rather uniform and condensed, making the entire sequence of panels feel like a cinematographic slow motion ³.

Sequence of elements

How is space/time structured in a sequence of elements within a single panel?

In most cases, a sequence of elements in a panel represents events that happen simultaneously.

However, in particular cases, elements juxtaposed in a panel can represent simultaneous yet distinct events, “stretching” the time expressed within a space that is otherwise perceived as continuous.

Let us look at a panel from the comic book Asterix And The Banquet by René Goscinny and Albert Uderzo as an example.

In the above example, the first panel of page 6 from Asterix And The Banquet depicts three distinct events that, technically ⁴, happen at the same time:

However, since they are juxtaposed in space one after the other and we read them from left to right, we perceive them as happening one slightly after the other.

Jumping through three different events within the same panel makes its perceived duration much longer than if another panel of the same size and shape were to represent a single event. The panel from Asterix And The Banquet ends up feeling like a cinematographic pan shot ⁵.

Time ↔ reading

Let us now focus on the second principle: time ↔ reading. The language of comics expresses the flow of time by speeding up or slowing down the reading experience.

As a rule of thumb, the more time we spend reading a sequence of pages, panels, and/or elements, the longer we perceive its “duration”.

How can we influence the reading experience? Usually, in two ways:

• the more visually complex a sequence is, the more time we need to digest it, and vice versa
• the more speech balloons a sequence has, the more time we need to read it, and vice versa

Visual complexity

How can visual complexity influence the reading experience?

Again, the more visually complex a sequence is, the more time we need to digest it, and vice versa.

Let us look at a spread from the manga Gon by Masashi Tanaka as an example. In volume 2, chapter 8, Gon the dinosaur tries to blend in and live with a colony of penguins.

In the above example from the manga Gon, by the time it takes us to find the main protagonist lost in the waddle of penguins, we end up feeling as though the little dinosaur has been living with the colony for quite a while.

Speech balloons

How can speech balloons influence the reading experience?

Again, the more speech balloons a sequence has, the more time we need to read it, and vice versa.

Let us use a panel from Sin City: The Hard Goodbye by Frank Miller as an experiment and play with the speech balloons of Marv, the protagonist, who is about to get wasted.

In the above example, the first panel of the page is modified: Marv’s speech balloons have been removed, and the panel does not have any dialogue.

Let us compare its reading experience with the one of the below example, where the same panel is left unmodified: Marv’s speech balloons have not been removed, and the panel preserves the original dialogue.

Reading the balloons in the unmodified panel slows our reading experience: Marv turns from taking a sip from a bottle to getting wildly drunk.

Recapitulation

As illustrated by the above examples, the language of comics can express the flow of time indirectly—through static images—by combining seamlessly these two core principles:

1. space = time (space equals time)
2. time ↔ reading (time is related to the reading experience)

What is JoJo’s Bizarre Adventure?

Hirohiko Araki (7 Jun 1960) is a mangaka and author of one of my favorite Japanese manga: JoJo’s Bizarre Adventure. The manga started in 1987 and continues to this day, spanning 8 series with a total of 131 volumes, and counting.

JoJo tells the adventures of the Joestar family and follows their struggles against the series’ core villain, Dio Brando, and his legacy.

The main characters in JoJo can generate spiritual entities, named Stands, which help their owners with various superhuman abilities.

Spoiler alert!

While I will try my best to keep spoilers to a minimum, I cannot avoid revealing a major plot event from JoJo’s 3^rd series—Stardust Crusaders. As a matter of fact, in this piece, I am interested in analyzing how Araki pushed the language of comics to the limits to represent that very event.

So, spoiler alert!

The zenith of the series

As a teenager, I considered the final showdown between the Joestar family and Dio Brando at the end of the 3^rd series to be the zenith of the manga.

Even now, 20 years later, I still rejoice while re-reading Dio’s World Part 1–18. Among all of the best moments of the 3^rd series, the battle between Dio Brando (stand → The World) and one of the Joestar party members, Noriaki Kakyoin (stand → Hierophant Green), remains one of my favorites.

Why?

The subject of Dio’s World Part 7 is indeed intriguing. At the end of a tense chase, Dio engages Kakyoin in battle. Kakyoin has Dio on the ropes and forces him to reveal (finally!) the secret of his stand: the ability to stop time for everyone except its owner.

Fascinated by Araki’s skills, I have always asked myself, “How was Araki able to convey the stoppage of time in a sequential art medium like comics that, by its own nature, can only convey the passage of time indirectly, by juxtaposing static images?!?”.

This article is my attempt to find an answer.

A few premises on mangas

In this piece, I focus my analysis only on Dio’s World Part 7, a chapter that consists of 20 pages in total, laid out two by two in 10 spreads ¹.

Since JoJo is a manga, its reading direction is reversed compared to Western comics. In a manga, you read pages starting from the right-hand page, corresponding to the end in Western comics, and you leaf through them backward, toward the left-hand page, corresponding to the start in Western comics:

Similarly, you read panels within a page, as well as elements within a panel, from right to left and top to bottom:

The flow of time in the language of comics

Before analyzing how Araki approached conveying the stoppage of time in Dio’s World Part 7, we should first brush up on our language of comics.

How does the language of comics express the flow of time? As a rule of thumb, by combining two basic but core principles:

• space = time (space equals time)
• time ↔ reading (time is related to the reading experience)

Space = time

Let us focus on the 1^st principle: space = time. The language of comics expresses the flow of time by sequencing space. Overall, it sequences space at three different levels. From highest to lowest:

• space/time is structured in a sequence of pages
• space/time is structured in a sequence of panels within a single page
• space/time is structured in a sequence of elements within a single panel

Time ↔ reading

Let us now focus on the 2^nd principle: time ↔ reading. The language of comics expresses the flow of time by speeding up or slowing down the reading experience.

As a rule of thumb, the more time we spend reading a sequence of pages, panels, and/or elements, the longer we perceive its “duration”.

How can we influence the reading experience? Usually, in two ways:

• the more visually complex a sequence is, the more time we need to digest it and vice versa
• the more speech balloons a sequence has, the more time we need to read it and vice versa

The sequence of pages

Let us start by having a look at the sequences of pages in Dio’s World Part 7. As in any action comic worthy of its name, pages in the sequence are mostly composed of multiple panels of various sizes, shapes, and slants.

Since almost all of the panels in the sequence represent a distinct action in a distinct moment in time, and since most of the pages in the sequence are composed of multiple panels, a lot of panels/actions per page involve a fast-paced narrative rhythm.

More panels → more actions → faster tempo.

But what happens when we reach page 138? The number of panels/actions per page drops drastically: from an average of 3,25 panels/actions per page on pages 126–137, we get to an average of 1,00 on pages 138–141, to get back again to a higher average of 4,50 on pages 142–143.

What is the deal with pages 138–141?

In these pages, Dio reveals his power and lets his stand, The World, stop the time for the first time.

So, how does Araki convey the stoppage of time at the level of the sequence of pages?

He first hastens the narrative tempo by having a high number of panels per page before the major plot event on pages 126–137, and then he purposely slows it down by abruptly decreasing the number of panels per page so that one and only one panel corresponds to each of the four pages 138–141.

But that is not all. He further slows the narrative tempo down by purposely stretching the length of one single action—the first few steps that Dio takes in the frozen time to engage Kakyoin and get him into the radius of action of The World—into three of those four pages.

An action that lasts just a couple of seconds is thus represented on three different pages, dilating our perception of time. By comparison, the actions in the pages immediately before (pages 134–137) last at least 20+ seconds in total.

The cliffhanger

And just to put the icing on the cake, Araki builds a cliffhanger on pages 136–137—right before the big revelation.

After having a confident Kakyoin deliver a line that seems to anticipate his victory over Dio at the beginning of page 136, Araki closes the spread by letting an all but frightened Dio Brando utter a sentence that forewarns a potential overturning of the situation in the very last panel of the left-hand page 137.

Since page 137 is the last page in the spread, we readers have to turn the page to move the plot forward and learn what Dio will do.

The suspense caused by the cliffhanger indeed motivates us to reach the next page, but it also contributes incidentally to further dilating our perception of time. Turning that paper page becomes particularly “heavy” as we perceive it as an obstacle that slows down our reading experience.

The sequence of panels and their elements

Let us further focus on the sequence of panels and elements in the panels on pages 138–141. As already mentioned, each of these pages coincides with a single, full-page panel.

The first full-page panel on the right-hand page 138 shows us the exact moment in which Dio Brando and The World stop the time. From the first glance, the panel looks quite different not only from the next three full-page panels but also from the rest of the panels in Dio’s World Part 7:

• it is the only panel in the chapter that has no gutters at all and extends beyond the trim area of the page
• it is the only panel that has a speech bubble with inverted colors, its text in white and bubble in black
• its background, void of details, is a mass of motion lines that lets us fully focus on the plastic pose taken by the two characters

By standing out from the others, it indeed better highlights the key action it represents. However, its dissimilarity has also a secondary effect. Since the panel and its elements have a few traits that we readers are not much used to, we require a bit more brainpower—and thus a bit more time—to fully process them.

Moreover, the drawing, a pleasure for the eyes, is one of the rare moments in which, as readers, we have the chance to see The World projected in its entire majesty.

It is a Wow! drawing for a Wow! moment. Its beauty catches our attention and makes our eyes linger on the page more than usual, further slowing us down.

The second full-page panel on the left-hand page 139 is, on the other hand, quite a different one. It is almost a reverse shot where we can see the Cairo skyline and Dio from behind, staring at Kakyoin. Judging by his pose, not more than a fraction of a second has passed since the preceding panel. However, the abundance of details in the background makes our eyes linger even more, and that fraction seems to last much longer.

There is no onomatopoeia, so silence is king. Kakyoin’s balance is precarious. A minaret is falling with no dust. Dio is literally out of the panel frame as if he were staring at a static painting. Araki gives us a lot of hints about what is going on, but we do not get it quite yet since, until now, as first-time readers, we have no clue about Dio’s superpower.

Not until we reach next spread, pages 140–141. Everything in the full-page panel on page 140 looks the same as on page 139. Frozen. Kakyoin’s balance is still precarious. Nothing has moved. Nothing but Dio Brando. That b*****d got rid of his rags, opened a gap in Hierophant Green’s minefield, and is now approaching Kakyoin.

The full-page panel on page 141 is just the same. Still frozen. Dio’s rags are suspended in mid-air. Yet Dio Brando took another few steps, and he is halfway from Kakyoin, who still stands in precarious balance, out of touch with the world. “What’s going on?!?” we ask ourselves.

Disoriented, we glance back and forth between pages 140 and 141, trying to solve the riddle. Both pages seem to look alike until we realize that they are not.

I like to imagine that Araki put these two pages in front of each other on purpose, to let us play spot the differences and further spend time on the spread. And the fraction of time that it takes Dio to jump from a dome to a tower becomes an eternity in our inner time, while we look at the effects of his sky walk, slowly realize what he has done, and worry about the potential aftermath.

The closure

After the peak of the climax, Araki makes everything clear in the last spread in Dio’s World Part 7, where the narrative rhythm returns to the usual, with an average of 4,50 panels per page.

Page 142 has six panels, coupled two by two.

The panels in each pair share the same camera angle and thus point to the same frozen, unchanging background. While Dio moves between frames, everything else stays immutable.

In the first two panels of page 142, Dio moves a rock out of his path. A still clock is well framed in the center of the panel. Its hands do not move.

In case it is not clear enough, in the last panel of the page, Araki has Dio explicitly declare that time has stopped. Dio is now one step closer to Kakyoin, who is still out of touch with the world….

Multilingual sitemaps

To serve a multilingual sitemap, we need to create a Sitemap index file and list a Sitemap file for each language we support.

Sitemap index file

We place the page named sitemap.html in the root directory of the site. It points to the other localized sitemaps in the respective language subfolders.

---
layout: none

sitemap:
  excluded: true
---

<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

  {%- assign pages = site.pages | where: 'language_reference', 'sitemap' %}

  {%- for page in pages %}
    <sitemap>
      <loc>{{ site.absoluteurl }}{{ page.url | remove: 'index.html' }}</loc>

      {%- if page.sitemap.lastmod %}
        {%- assign lastmod = page.sitemap.lastmod | date: '%Y-%m-%d' %}
      {%- elsif page.date %}
        {%- assign lastmod = page.date | date_to_xmlschema %}
      {%- else %}
        {%- assign lastmod = site.time | date_to_xmlschema %}
      {%- endif %}
      <lastmod>{{ lastmod }}</lastmod>
    </sitemap>
  {%- endfor %}

</sitemapindex>

By setting the following variables in the front matter of the Sitemap index file:

sitemap:
  excluded: true

we make sure to exclude it from the list of pages returned in each language Sitemap file.

Sitemap files

We then place a dedicated sitemap.xml page in each of the language subdirectories of the site. For example, here is the front matter of the English page sitemap.xml:

---
layout: none

title: English Sitemap

language: en
language_reference: sitemap

sitemap:
  excluded: true
---

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

  {%- assign posts = site.posts | sort: 'date' | where: 'language', page.language | where: 'published', true %}

  {%- for post in posts reversed %}
    {%- unless post.sitemap.excluded == true %}
    <url>
      <loc>{{ site.absoluteurl }}{{ post.url }}</loc>

      {%- if post.sitemap.lastmod %}
        {%- assign lastmod = post.sitemap.lastmod | date: '%Y-%m-%d' %}
      {%- elsif post.date %}
        {%- assign lastmod = post.date | date_to_xmlschema %}
      {%- else %}
        {%- assign lastmod = site.time | date_to_xmlschema %}
      {%- endif %}
      <lastmod>{{ lastmod }}</lastmod>

      {%- if post.sitemap.changefreq %}
        {%- assign changefreq = post.sitemap.changefreq %}
      {%- else %}
        {%- assign changefreq = 'monthly' %}
      {%- endif %}
      <changefreq>{{ changefreq }}</changefreq>

      {%- if post.sitemap.priority %}
        {%- assign priority = post.sitemap.priority %}
      {%- else %}
        {%- assign priority = 0.5 %}
      {%- endif %}
      <priority>{{ priority }}</priority>
    </url>
    {%- endunless %}
  {%- endfor %}

  {%- assign pages = site.pages | where: 'language', page.language %}

  {%- for page in pages %}
    {%- unless page.sitemap.excluded == true %}
    <url>
      <loc>{{ site.absoluteurl }}{{ page.url | remove: 'index.html' }}</loc>

      {%- if post.sitemap.lastmod %}
        {%- assign lastmod = page.sitemap.lastmod | date: '%Y-%m-%d' %}
      {%- elsif post.date %}
        {%- assign lastmod = page.date | date_to_xmlschema %}
      {%- else %}
        {%- assign lastmod = site.time | date_to_xmlschema %}
      {%- endif %}
      <lastmod>{{ lastmod }}</lastmod>

      {%- if page.sitemap.changefreq %}
        {%- assign changefreq = page.sitemap.changefreq %}
      {%- else %}
        {%- assign changefreq = 'monthly' %}
      {%- endif %}
      <changefreq>{{ changefreq }}</changefreq>

      {%- if page.sitemap.priority %}
        {%- assign priority = page.sitemap.priority %}
      {%- else %}
        {%- assign priority = 0.3 %}
      {%- endif %}
      <priority>{{ priority }}</priority>
    </url>
    {%- endunless %}
  {%- endfor %}

</urlset>

Each page contains two for loops:

• the first loop goes through the array of posts and returns those that do not have the variables sitemap: excluded: true set in their front matter
• the second loop goes through the array of pages and, similarly, returns those that do not have the variables sitemap: excluded: true set in their front matter

We can override the lastmod, changefreq, and priority default values by setting the following variables in the front matter of the file:

sitemap:
  lastmod: 2021-08-15 08:00:00 +0300
  changefreq: monthly
  priority: 0.5

Again, we can exclude a post or page from being returned in a sitemap by setting the following variables in the front matter of the file:

sitemap:
  excluded: true

RSS feed

Coming soon…

Page not found

Coming soon…

Resources

• Creating a multilingual blog with Jekyll
• Making Jekyll multilingual
• Making a multilingual website with Jekyll collections
• Multilingual Jekyll: How The Programming Historian does that
• Multilingual Jekyll websites

Afterword

If you have any suggestions or spot something worth fixing, please feel free to either drop me a line or create an issue on GitHub. Thoughts, critiques, suggestions are welcomed.

Thank you!

Includes

The purpose of most of the includes in the basic site is building the navigation.

header.html

The include header.html generates the header in the page. It, in turn, “includes” three more includes:

• title.html
• navigation.html
• language-switch.html

<header>
  {% include site-title.html %}
  <nav>
    {% include navigation.html %}

    {% include language-switch.html %}
  </nav>
</header>

navigation.html

The include navigation.html generates an unordered list containing all the published pages with the same language variable as the current page.

<ul>
  {%- assign navigation_pages = site.pages
    | where: 'layout', 'page'
    | where: 'language', page.language
    | where: 'published', true
    | sort: 'order' %}
  {%- for navigation_page in navigation_pages %}
  <li{%- if navigation_page.title == page.title %} class="current"{%- endif %}>
    <a href="{{ site.baseurl }}{{ navigation_page.url }}">{{ navigation_page.title }}</a>
  </li>
  {%- endfor %}
</ul>

In the code above, we create a new variable named navigation_pages which returns a list of the pages that, in their front matter, have:

• the layout variable set to page
• the language variable set to the language of the current page (page.language)
• the published variable set to true

We order the list according to the order variable, then loop trough the array of pages and generate the list items of the unordered list.

Whenever the title of the current page in the array (navigation_page.title) matches the title of the current page (page.title), we add a class named current to the corresponding <li/> tag.

language-switch.html

The include language-switch.html generates an unordered list containing all the languages supported on the site. You can use the list to switch to other language translations of the current page/post, if available.

<ul>
  {%- for language in snippets.languages %}

    {%- if page.layout == 'page' %}
      {%- assign navigation_pages = site.pages
        | where: 'language_reference', page.language_reference
        | where: 'language', language[1].slug %}
      {%- if navigation_pages.size == 1 %}
        {%- for navigation_page in navigation_pages %}
          {%- assign url = site.baseurl | append: navigation_page.url %}
        {%- endfor %}
      {%- else %}
        {%- assign navigation_pages = site.pages
          | where: 'language_reference', site.fallback_page
          | where: 'language', language[1].slug %}
        {%- for navigation_page in navigation_pages %}
          {%- assign url = site.baseurl | append: navigation_page.url %}
        {%- endfor %}
      {%- endif %}

    {%- elsif page.layout == 'post' %}
      {%- assign navigation_posts = site.posts
        | where: 'language_reference', page.language_reference
        | where: 'language', language[1].slug %}
      {%- if navigation_posts.size == 1 %}
        {%- for navigation_post in navigation_posts %}
          {%- assign url = site.baseurl | append: navigation_post.url %}
        {%- endfor %}
      {%- else %}
        {%- assign navigation_pages = site.pages
          | where: 'language_reference', site.fallback_page
          | where: 'language', language[1].slug %}
        {%- for navigation_page in navigation_pages %}
          {%- assign url = site.baseurl | append: navigation_page.url %}
        {%- endfor %}
      {%- endif %}

    {%- else %}
      {%- assign navigation_pages = site.pages
        | where: 'language_reference', site.fallback_page
        | where: 'language', language[1].slug %}
      {%- for navigation_page in navigation_pages %}
        {%- assign url = site.baseurl | append: navigation_page.url %}
      {%- endfor %}

    {%- endif %}
    <li{%- if language[1].slug == page.language %} class="current"{%- endif %}>
      <a href="{{ url }}">{{ language[1].value }}</a>
    </li>
  {%- endfor %}
</ul>

In the code above, we loop through the languages defined in the snippets.yml file (read the section Snippets for more details).

languages:
  en:
    value: English
    slug: en
  it:
    value: Italian
    slug: it

The for loop contains three different code blocks that run only if specific conditions are met. If we look only at its high-level structure:

<ul>
  {%- for language in snippets.languages %}

    {%- if page.layout == 'page' %}
      <!-- first code block -->

    {%- elsif page.layout == 'post' %}
      <!-- second code block -->

    {%- else %}
      <!-- third code block -->

    {%- endif %}
    <li {%- if language[1].slug == page.language %} class="current"{%- endif %}>
      <a href="{{ url }}">{{ language[1].value }}</a>
    </li>
  {%- endfor %}
</ul>

We run the first block of code only if the layout variable of the current page is set to page, else, if it is set to post, we run the second block of code, else, if it is set to anything else (or nothing at all), we run the third block of code.

After at least one of the code blocks has been run, we generate the list items of the unordered list.

Whenever the slug of the current language item of the array snippets.languages (language[1].slug) matches the language of the current page (page.language), we add a class named current to the corresponding <li/> tag.

if page.layout == ‘page’

{%- if page.layout == 'page' %}
  {%- assign navigation_pages = site.pages
    | where: 'language_reference', page.language_reference
    | where: 'language', language[1].slug %}
  {%- if navigation_pages.size == 1 %}
    {%- for navigation_page in navigation_pages %}
      {%- assign url = site.baseurl | append: navigation_page.url %}
    {%- endfor %}
  {%- else %}
    {%- assign navigation_pages = site.pages
      | where: 'language_reference', site.fallback_page
      | where: 'language', language[1].slug %}
    {%- for navigation_page in navigation_pages %}
      {%- assign url = site.baseurl | append: navigation_page.url %}
    {%- endfor %}
  {%- endif %}

What does the first block of code do?

{%- assign navigation_pages = site.pages
  | where: 'language_reference', page.language_reference
  | where: 'language', language[1].slug %}

We create a new variable named navigation_pages which returns a list of the pages that, in their front matter, have:

• the language_reference variable equal to the current page’s language_reference variable (page.language_reference)
• the language variable equal to the slug of the current language item (language[1].slug) in the array snippets.languages

If we set the front matter of the pages correctly, the size of the array navigation_pages should be:

• either equal to one if the current page has a corresponding page translated into the current language item of the array snippets.languages
• or equal to zero if the current page does not have a corresponding page translated into the current language item of the array snippets.languages

{%- if navigation_pages.size == 1 %}
  {%- for navigation_page in navigation_pages %}
    {%- assign url = site.baseurl | append: navigation_page.url %}
  {%- endfor %}

If the size of the array navigation_pages is equal to one, we loop through the array navigation_pages and create a new variable named url by combining the site.baseurl (defined in the _config.yml file) and the URL of the single page (navigation_page.url) contained in the array navigation_pages.

{%- else %}
  {%- assign navigation_pages = site.pages
    | where: 'language_reference', site.fallback_page
    | where: 'language', language[1].slug %}
  {%- for navigation_page in navigation_pages %}
    {%- assign url = site.baseurl | append: navigation_page.url %}
  {%- endfor %}
{%- endif %}

If instead, the size of the array navigation_pages is equal to zero (or more than one, which is trouble), we do not have a corresponding page in the current language item of the array snippets.languages to switch to.

Thus, we provide a fallback page (site.fallback_page) so that the web surfers who interact with the language switch and select a language that does not support the current page are at least redirected to a meaningful page in the language they selected.

We set the fallback_page in the _config.yml file located in the site’s root directory:

fallback_page: 'stories'

The fallback pages of the basic site are those whose language_reference variable is set to stories.

Why stories? Because—in the context of the basic site—the pages whose language_reference variable is set to stories function as home pages, since they:

• return a list of all the published posts (they have the same structure as the index.html page)
• have a translated counterpart in all the languages supported on the site

elsif page.layout == ‘post’

{%- elsif page.layout == 'post' %}
  {%- assign navigation_posts = site.posts
    | where: 'language_reference', page.language_reference
    | where: 'language', language[1].slug %}
  {%- if navigation_posts.size == 1 %}
    {%- for navigation_post in navigation_posts %}
      {%- assign url = site.baseurl | append: navigation_post.url %}
    {%- endfor %}
  {%- else %}
    {%- assign navigation_pages = site.pages
      | where: 'language_reference', site.fallback_page
      | where: 'language', language[1].slug %}
    {%- for navigation_page in navigation_pages %}
      {%- assign url = site.baseurl | append: navigation_page.url %}
    {%- endfor %}
  {%- endif %}

The second block of code behaves similarly to the first, with the only difference being that we manipulate an array of posts (navigation_posts) rather than one of pages (navigation_pages).

else

{%- else %}
  {%- assign navigation_pages = site.pages
    | where: 'language_reference', site.fallback_page
    | where: 'language', language[1].slug %}
  {%- for navigation_page in navigation_pages %}
    {%- assign url = site.baseurl | append: navigation_page.url %}
  {%- endfor %}

The third block of code runs in the remote eventuality in which both the first and second blocks of code do not run. so that we make sure, again, to serve a fallback page to our web surfers.

Fallback page

How can we be sure that the fallback page truly works?

In this basic site, not all the pages and posts are translated into all the supported languages—on purpose.

If you go to the English page Postface and press on Italian in the language switch, you are indeed redirected to the Italian page Storie.

Similarly, if you go to the Italian post Ciao Giove and press on English in the language switch, you are indeed redirected to the English page Stories.

title.html

The include title.html generates the title of this basic site.

{%- if page.language == site.default_language %}
  {%- assign url = site.baseurl | append: '/'%}
{%- else %}
  {%- assign navigation_pages = site.pages
    | where: 'language_reference', site.fallback_page
    | where: 'language', page.language %}
  {%- for navigation_page in navigation_pages %}
    {%- assign url = site.baseurl | append: navigation_page.url %}
  {%- endfor %}
{%- endif %}
<h1>
  <a href="{{ url }}" {%- if page.url == '/' %} class="current"{%- endif %}>{{ site.title }}</a>
</h1>

Again, we have two different code blocks that run only if specific conditions are met.

We run the first code block when the language of the current page (page.language) is equal to the default language (site.default_language) defined in the _config.yml file. Through it, we create a new variable named url by combining the site.baseurl (defined in the _config.yml file) and /, which is the domain name of the site. Web surfers who browse the site in the default language are directed to the main page when they press on the title.

Else, we run the second code block to provide the usual fallback page already discussed above (read the section language-switch.html for more details). Web surfers who browse the site in a language different from the default one are directed to the fallback page in their current language when they press on the title.

localizations.html

The include localizations.html adds <link rel="alternate" … /> tags in the <head/> tag of a page to tell search engines if there are multiple versions of the page for different languages or regions.

{%- if page.layout == 'page' %}
  {%- assign localized_pages = site.pages
    | where: 'language_reference', page.language_reference
    | sort: 'language' %}
  {%- for localized_page in localized_pages %}
    <link rel="alternate" hreflang="{{ localized_page.language }}" href="{{ site.baseurl }}{{ localized_page.url }}" />
  {%- endfor %}

{%- elsif page.layout == 'post' %}
  {%- assign localized_posts = site.posts
  | where: 'language_reference', page.language_reference
  | sort: 'language' %}
  {%- for localized_post in localized_posts %}
    <link rel="alternate" hreflang="{{ localized_post.language }}" href="{{ site.baseurl }}{{ localized_post.url }}" />
  {%- endfor %}

{%- elsif page.layout == 'index' %}
  {%- assign localized_pages = site.pages
    | where: 'language_reference', site.fallback_page
    | sort: 'language' %}
  {%- for localized_page in localized_pages %}
    <link rel="alternate" hreflang="{{ localized_page.language }}" href="{{ site.baseurl }}{{ localized_page.url }}" />
  {%- endfor %}
{%- endif %}

Again, we have three different code blocks that run only if specific conditions are met (read the section language-switch.html for more details).

Front matter

In the front matter of each page or post, in addition to the usual variables, we set two new custom variables to handle the multilingual logic¹ of the site:

• language defines the language of the page/post
• language_reference relates different translations of the same page/post

We can use language to retrieve only the pages or posts in the same language, and language_reference to retrieve only the pages or posts that return the same content translated into different languages (read the sections navigation.html and language-switch.html for more details).

Pages

For example, here is the front matter of the English page Stories:

---
layout: page

title: Stories
description: Stories.

language: en
language_reference: stories

published: true
order: 2
---

and here is the front matter of its Italian counterpart:

---
layout: page

title: Storie
description: Storie.

language: it
language_reference: stories

published: true
order: 2
---

Both pages have the variable language_reference set to stories so that they can be easily related with each other.

Posts

For example, here is the front matter of the English post Hello World:

---
layout: post

title: Hello World
description: Hello world.
date: 2021-01-01 00:00:00

language: en
language_reference: world

published: true
---

and here is the front matter of its Italian counterpart:

---
layout: post

title: Ciao Mondo
description: Ciao Mondo.
date: 2021-01-01 00:00:00

language: it
language_reference: world

published: true
---

Both posts have the variable language_reference set to world so that they can be easily related to each other.

Data files

We create a YAML data file named snippets.yml to store the different translations of the user interface copy as additional data in the _data subdirectory.

We then create a new variable named snippets in the base.html layout to shorten the code needed to access the data contained in the snippets.yml file:

{%- assign snippets = site.data.snippets %}

Since the base.html layout is the base for all the other layouts, placing the variable snippets there allows us access it from any other page.

Through this variable, we can write just snippets.name_of_the_data_item when accessing a data item rather than the full, longer site.data.snippets.name_of_the_data_item.

For example, the piece of code that generates the Back to the Top link at the bottom of the page:

<a href="#{{ snippets.top[page.language] | slugify: 'latin' }}">{{ snippets.back[page.language] }}</a>

uses the following variable:

{{ snippets.back[page.language] }}

To retrieve the name of the link in the current selected language from the following lines in the snippets.yml data file:

back:
  en: Back to the Top
  it: Torna in Cima

top:
  en: Top
  it: Cima

If the user interface copy is quite lengthy, we might consider creating a different data file for each language and placing it in a dedicated subdirectory—similar to what we already do for pages and posts. For this basic site, we keep things simple and use only one data file to list the copy in all the different languages.

Preface

When I found myself coding a multilingual site in Jekyll, I stumbled on a lot of useful resources while surfing the Web, but I struggled quite a bit to digest and replicate their approaches due to the lack of a concrete, working example to look at.

At first, I tried to replicate their approaches directly in the site I was working on, but this quickly backfired because it proved to be too big of a bite to chew for a designer who codes.

Not giving up, I then decided to create a basic site from scratch to focus on learning how to handle multiple languages in Jekyll without any extra complexity in the picture.

That very same basic site is hosted in this repository, which I gladly share with the world as an example project, hoping to help anyone interested in coding a multilingual site using Jekyll.

Foreword

A few words before starting. Sites built with the approach illustrated in this series of articles:

• can support as many languages as needed
• can serve pages or posts that may not need to be translated into all supported languages
• have a language switch that can either direct web surfers to view the current page or post in the selected language, if available, or direct them to an alternative fallback page
• do not require you to install custom plugins
• leverage the basics of Jekyll and thus making them relatively future-proof (famous last words)
• can be published as GitHub Pages sites

Specifically, the basic site hosted in this repository and used as a concrete example to illustrate my approach:

• is visually quite crude, as the focus is on illustrating a structural (not visual) approach to building multilingual sites
• supports English and Italian as example languages

Directory structure

The directory structure of the basic site looks like this:

.
├── _data
│   └── snippets.yml
├── _includes
│   ├── head.html
│   ├── header.html
│   ├── localizations.html
│   └── references.html
├── _layouts
│   ├── base.html
│   ├── index.html
│   ├── page.html
│   └── post.html
├── _posts
│   ├── en
│   │   ├── YYYY-MM-DD-title.markdown
│   │   ├── …
│   │   └── YYYY-MM-DD-title.markdown
│   └── it
│       ├── YYYY-MM-DD-titolo.markdown
│       ├── …
│       └── YYYY-MM-DD-titolo.markdown
├── 404.html
├── config.yml
├── en
│   ├── drafts.html
│   ├── feed.xml
│   ├── postface.html
│   ├── preface.html
│   ├── sitemap.xml
│   └── stories.html
├── index.html
├── it
│   ├── bozze.html
│   ├── feed.xml
│   ├── prefazione.html
│   ├── sitemap.xml
│   └── storie.html
└── sitemap.xml

Pages

We organize the pages into as many subdirectories as the languages we plan to support, naming them using ISO language codes. The basic site has two subdirectories, one named en for grouping the English pages and one named it for grouping the Italian pages.

├── …
├── en
│   ├── drafts.html
│   ├── feed.xml
│   ├── postface.html
│   ├── preface.html
│   ├── sitemap.xml
│   └── stories.html
├── …
├── it
│   ├── bozze.html
│   ├── feed.xml
│   ├── prefazione.html
│   ├── sitemap.xml
│   └── storie.html
├── …

After Jekyll has built the site, we can reach, for example, the English page stories.html and the Italian page storie.html at the URLs www.site.ext/en/stories.html and www.site.ext/it/storie.html, respectively.

Exceptions

But, of course, there are exceptions. We place the pages 404.html, index.html, and sitemap.html in the root directory of the site. Why?

404.html and index.html are unique pages. Jekyll builds and serves automatically one and only one of them at a time.

sitemap.xml is a Sitemap index which points to other localized sitemaps in the respective language subfolders (read the section Multilingual sitemaps for more details).

Posts

We organize the posts following a similar logic. The basic site has two subdirectories in the folder named _posts, one named en for grouping the English posts and one named it for grouping the Italian posts.

├── …
├── _posts
│   ├── en
│   │   ├── YYYY-MM-DD-title.markdown
│   │   ├── …
│   │   └── YYYY-MM-DD-title.markdown
│   └── it
│       ├── YYYY-MM-DD-titolo.markdown
│       ├── …
│       └── YYYY-MM-DD-titolo.markdown
├── …

Configuration

We then add the following configuration options in the _config.yml file placed in the site’s root directory:

defaults:
-
  scope:
    path: '_posts/en'
    type: 'posts'
  values:
    permalink: 'en/story/:title'
    language: en
-
  scope:
    path: '_posts/it'
    type: 'posts'
  values:
    permalink: 'it/storia/:title'
    language: it

By setting global permalinks for posts, we can reach, for example, the English post named 2021-01-01-hello-world.markdown and the Italian post named 2021-01-01-ciao-mondo.markdown at the URLs www.site.ext/en/story/hello-world.html and www.site.ext/it/storia/ciao-mondo.html, respectively.

Below is the main reasoning behind my thesis:

• Remediation
• Digital revolution
• Sequential art
• Hybrid media form

Remediation

The relationship between the two media of cinema and comics is a long story of competition and reciprocal remediation².

The term remediation does not refer to the transposition of contents³ between cinema and comics, but rather to the reciprocal borrowing and reshaping of their media forms by both.

A practical example of remediation is the way the movie Sin City—a transposition of the graphic novel of the same name—has remediated a typical device of the comics media form: the splash page.

Through “splash pages” […] comics have the distinctive potential to convey in purely graphic terms the importance of a (literally) “big” moment in the story.

Greg M. Smith, Shaping The Maxx: adapting the comic book frame to television

Restricted by the film’s seemingly fixed, invisible frame the movie remediates and reshapes the “splash page” device through camera movement and the artificially frozen pose of the jumping character.

Digital revolution

Before the digital revolution, these reciprocal remediations were always limited by different production, recording, transmission, and reproduction technologies.

After the digital revolution, the technological differences between the two cultural forms—absorbed by the World Wide Web—have been reset. However, in most cases, cinema and comics have continued to be considered and remediated separately.

Is it possible to create a new hybrid media form that integrates the characteristics of cinema and comics that once seemed incompatible, now that the two mediums potentially differ only in their respective processes?

Sequential art

To assess the potential for interbreeding between the two cultural forms, cinema and comics have been subsumed under the broader concept of sequential art: the arrangement of pictures or images and words to narrate a story or dramatize an idea—a definition created in 1985 by Will Eisner⁴ and expanded in 1994 by Scott McCloud⁵. This concept has been used to compare cinema and comics, highlighting their affinities and differences.

The comparison analyzes the following points:

• the respective procedures by which cinema and comics represent time and space, both at the level of the cinematic shot and the comics panel, as well as at the level of the sequence of shots and panels;

• the differences between the cinema split screen and the comics layout;

• the differences between the format of the cinema shot and that of the comics panel;

• the respective procedures by which cinema and comics represent voice, noise and music;

• the respective procedures of interpretation.

Hybrid media form

The consequences of the mid-1980s digital revolution⁶, the emergence of the new digital media and their characteristics, and the new possibilities for producing dynamic images enabled by computers and the Web have been subsequently examined.

In the end, a new hybrid media form that integrated both cinema and comics was proposed and demonstrated: Medlay.

This hybridization was made possible by the mid-1980s digital revolution and the ever-growing, eclectic and inclusive Web environment, which serves as a melting pot for various old media forms and has increasingly become a crucial distribution channel.

If you have any suggestions or spot anything that needs fixing, please let me know. Your thoughts, critiques, and recommendations are more than welcome.

Thank you!

• Series of pieces
• Pace of space
• Viewers as motors of the narration

Series of pieces

A sequence consists of one¹ or more series of pieces² that are sequentially juxtaposed in space.

By being arranged in space, different pieces are placed into significant proximity with each other and create narrative meanings.

Pace of space

In a Medlay artefact—similarly to what happens in a comic one—space at the level of a sequence indirectly represents time: the development in time of a narration is represented through the configuration of space.

As American cartoonist and comics theorist Scott McCloud theorized with his infinite canvas concept, the pace of a comic’s narration on the Web is no longer influenced or limited by the physical boundaries of a page³:

The “infinite” canvas is a challenge to think big; a series of design strategies based on treating the screen as a window rather than a page.The basic premise is that there’s no reason that long-form comics have to be split into pages when moving online. Pages are an option […].

Print cartoonists (myself included) make a constant series of compromises in pacing and design to stuff out stories into pages. We add and subtract panels, restrict size variation, break reading flow, and rarely if ever vary the distance between panels for fear of wasting paper. Without such restrictions, though, every one of those choices can be made exclusively on behalf of the needs of the story.

Scott McCloud, Infinite Canvas

By embracing the concept of the infinite canvas, the narrative pace of a medlay sequence has no spatial boundaries or restrictions and is free to extend according to the needs of the story.

Viewers as motors of the narration

Since a sequence extends in space rather than time, viewers are entirely free to interact with and explore it in any order and at their own pace⁴. Specifically, they can:

• have a glanceable, immediate, synthetic overview of the narrative meaning of a particular sequence, or portion thereof;
• have random access to any piece of a sequence and focus their attention on it at any given time, regardless of its location.

The above points become crucial for web-based narration, since Web viewers are in an active stance while surfing the net and expect to drive any artefact they interact with⁵.

In a medlay artefact, viewers actively move the narration forward by exploring the various sequences of pieces and scrolling the canvas: the journey through space becomes the narration.

If you have any suggestions or spot anything that needs fixing, please let me know. Your thoughts, critiques, and recommendations are more than welcome.

Thank you!

It is a hybrid between a cinematographic shot and a comic panel. Like its precursors, it gains significance when placed in context with other pieces—specifically, when it is spatially juxtaposed in a sequence¹ of pieces.

• Series of images into loop
• Different types of pieces
• Length of time
• Viewer’s interaction
• Frame

Series of images into loop

A piece consists of one or more dynamic series of images² sequentially juxtaposed over time.

Each piece is structured as a loop, allowing the content to be repeated over and over in time and always accessible to viewers.

Different types of pieces

When a piece is formed into a loop, it means that the one or more series of images it is composed of are spliced together.

The splicing can be either continuous³, achieved through a smooth transition of time and space, or discontinuous, marked by the absence of such a transition.

When a piece consists of a sequence from a single series, the last and first images of the series are spliced together at the end of the piece, meaning the series⁴ is juxtaposed in time with itself.

When a piece consists of a sequence of multiple series, the last image of the last series and the first image of the first series are spliced together at the end of the piece, meaning the last series is juxtaposed in time with the first.

A particular case of a multiple-series piece occurs when it consists of a sequence of two series of images where the second series is simply the first one, time-reversed and played back.

Length of time

Each series is designed to run for a short period rather than a long one. The shorter the series, the shorter the resulting piece, and the less time viewers need to go through it and fully grasp it.

The duration of each series must always be considered when crafting a quickly digestible piece, especially when the piece is composed of multiple series in sequence.

Viewer’s interaction

A piece can be programmed to respond to viewers’ interactions and/or focus of attention, shifting from a passive state to an active one when triggered by an event⁵.

For example, a piece consisting of a single series may change state and transition⁶ to a different series in response to viewers tapping the piece or scrolling the canvas to a specific area of focus.

Frame

Since a piece is spatially juxtaposed on a canvas, its frame is directly visible⁷ to viewers. The frame’s size, shape and borders become significant elements that can be shaped to express or reinforce the meaning of the piece.

If you have any suggestions or spot anything that needs fixing, please let me know. Your thoughts, critiques, and recommendations are more than welcome.

Thank you!

A media form is to a media artifact as comics is to a particular comic book or as cinema is to a particular movie: the latter is a specific application of the former.

Medlay is hybrid because it combines the strengths of two popular media forms: cinema and comics. For example, the moving image in cinema or the variably sized and shaped panel in comics.

Specifically, it fuses the one-image-at-a-time temporal narration typical of cinema with the multi-images spatial narration characteristic of comics.

Two proof-of-concept prototypes have been created to demonstrate the potential uses of Medlay: The Last Dispatch and Ubik Chap. 6. Both narrate a short story.

Viewers of a Medlay artifact can actively and freely explore¹ the time and space of a multimedia narration.

The watching time of a Medlay artifact is not dictated by the roll of moving images as it is in a movie, allowing viewers to interact with the narrative sequence in an order and pace of their own choosing.

If you have any suggestions or spot anything that needs fixing, please let me know. Your thoughts, critiques, and recommendations are more than welcome.

Thank you!