A blog for a Japanese garden design enthusiast (that is, me) to articulate his thought on the design intent behind historical gardens. Currently, articles on Ryoan-ji Rock Garden and Koho-an Temple are posted.
tjg.mp4
https://translating-japanese-gardens.pages.dev
The site is hosted by Cloudflare Pages, which I have chosen for an excellent developer experience that it provides.
This site features my own writings, speculating design intent behind historical gardens in Kyoto. The challenge is to ensure that web typography, the implementation of which is often very sloppy, keeps up with the beauty of these gardens.
Blog posts typically insert images between paragraphs of text. But the amount of space above and below images is rarely thought out.
In terms of messages delivered to the reader, an image may belong to the previous paragraph but not to the following one. If so, the vertical whitespace should be smaller above the image than below the image. To be more precise, the whitespace above (below) the image should be equal to the space between lines of text (between paragraphs).
To achieve such whitespace hierarchy, I use the technique known as text cropping (see Kevin Powell's article in 2018) to remove an extra space in text boxes above the cap-height or x-height of text and below the baseline of text. It enables us to control the whitespace between paragraphs of text and between an image and a paragraph in the same fashion: just use the same value of margin-top.
The site logo is made with inline SVG, using the dx attribute of the <tspan> element to position each individual character. For how I implement it, see src/components/SiteTitle.js.
For wide screens, both sides of each blog article are lined with historical Japanese patterns (shippo for Ryoan-ji; seigaiha for Koho-an), inspired by East Asian hanging scrolls (kakejiku).
To implement these patterns, I use the linear-gradient() CSS function by borrowing ideas from Lea Verou's CSS3 Patterns Gallery. For how I implement it, see:
src/utils/patterns.jssrc/element/Main.js(a Styled Component that styles the<main>element across pages)
Next.js is used for static site generation (SSG) to shorten page load time while using React for code maintainability.
For mobile device users, the images of narrower widths will be downloaded to minimize the waiting time for seeing the pictures of gardens. This is implemented by manually making up the <img> elements with the sizes and srcset attributes.
Each blog post and its title on the index page uses a different font to reflect the design principle of each garden (Cormorant for Ryoan-ji; Playfaire Display and Libre Baskerville for Koho-an). The index page has its own custom font (Reforma). Plus, Japanese characters, rendered in Shippori Miincho, are used for decoration purposes.
Serving all these custom fonts via the Google Fonts server is a performance nightmare.
Consequently, I subset each font file to the glyphs actually used on this website, with the help of Glyphhanger, which in particular allows me to serve only a handful of Japanese characters out of thousands of glyphs in the original font file.
These subsetted font files are then served from the same server as the one for content (Lines 18-151 in src/utils/GlobalStyle.js), saving the time for a third-party connection setup.