I built Sinophonia as an ongoing project to introduce Chinese-language writing, recordings and other media, as well as to share information on where to find physical books, Chinese-supported podcast platforms, and related resources.
This is and was my first effort at developing a public-facing website, and makes use of standard HTML and CSS tools. A less common component is the use of Embedded JavaScript, a templating tool that enables JavaScript to be written directly into HTML. More recently I've experimented with rendering content from Markdown pages as well.
Clone the repo from GitHub:
$ git clone [email protected]:essteer/sinophoniaNavigate to the root directory and install the packages using npm:
$ cd sinophonia
$ npm installTo run on a local machine for local development, navigate to the root directory and run:
$ npx nodemon src/index.js
[nodemon] 3.1.3
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node index.js`
Serving on port 3000nodemon is used to render changes made during development without needing to re-launch the server.
The website is deployed via Vercel using a CI/CD workflow integrated with the GitHub repository.
A major benefit of integrating with Vercel in this way is the ability to view preview deployments from pull requests.
Basic settings for Vercel are contained in vercel.json in the project root.
Notes on the website content and frontend decisions.
The site uses Google Fonts for title text (Oswald: Latin script | ZCOOL QingKe HuangYou: Chinese script) and body text (Source Serif Pro: Latin script | Noto Serif TC: Chinese script).
ZCOOL QingKe HuangYou is primarily designed for simplified Chinese character sets, though it contains traditional variants for most — but not all — characters.
Sinophonia makes use of traditional characters, most of which are featured in ZCOOL QingKe HuangYou. There are a small number of exceptions for which I have had to make use of simplified variants. This isn't ideal, but I love the design of the font and decided it is worth the trade-off. Purists please 諒解 - or better yet, release more fonts! There aren't enough creative designs for Chinese scripts.
To optimise use of web fonts, practices have been adopted from CSS Wizardy's additive method:
&display=swapat the end of the href link is now default with Google Fonts - this allows the system font to load if there is a delay in fetching the web font.media="print"to fetch Google Fonts File asynchronously.- Preload the CSS file to make the asynchronous fetch high priority.
- Preconnect fonts.gstatic.com, disabling the default fonts.googleapis.com preconnect.
- A
noscriptfallback is also included for instances where JavaScript is disabled.
Images are hosted on Cloudinary, and include artworks, photographs, official logos and so on.
Attributions are explicit and I have sought permission from owners to use their images — many have kindly granted this permission, but if you are the author of content here that you would like to be removed or amended then contact me directly on [email protected].
A challenge arose when designing a page that contains Chinese text displayed in vertical format. I wanted to present two text-boxes that showed the same passage rendered horizontally and then vertically.
Horizontal display that adapts to screen size changes is easily achieved through standard tools and attributes such as flexbox.
Vertical display is less straightforward. A W3C article "Styling vertical Chinese, Japanese, Korean and Mongolian text" got me started with wrapping text in columns, but achieving a responsive display proved more difficult.
I initially wanted to begin with a fixed height for the text-box on screens wide enough to achieve a given number of columns, but then extend the height of the columns as the screen narrowed. The text often slipped off one side of the screen, or resulted in too much whitespace when trying to find a balance between height and width for wider screens.
In the end I opted to use overflow on the x-axis with a fixed height, so that users could scroll horizontally to view any text not immediately visible (in the same we we scroll down on a typical website).
The key attributes used — ignoring colours and dimensions — are:
.vertical-panel {
writing-mode: vertical-rl;
overflow-x: auto;
}The end result is here in the second text-box.
I may revisit this another time or experiment with vertical rendering elsewhere.
All text-based content is my own unless otherwise indicated. The core of the website is organised as follows:
| Section | Description |
|---|---|
| 墨 INK | Introductions to writers and books |
| 嗓 VOICE | Introductions to podcast series |
| 源 SOURCES | Where to get hold of content and study materials |
More content will be added to these sections over time, with new sections also planned - watch this space!
I learnt many of the skills needed to build this website by completing Colt Steele's excellent Web Developer Bootcamp on Udemy.