Using Shavian Unicode in HTML and CSS: A Step‑By‑Step Tutorial

Shavian, the phonetic alphabet devised by George Bernard Shaw, offers a remarkably regular way to write English. ShawAlphabet.com has become the definitive resource for anyone who wants to learn, convert, or publish text in Shavian. In this tutorial we’ll walk through every step— from the basics of the 48‑letter system to embedding Shavian in web pages with HTML and CSS— so you can start writing in this elegant script right away.

What is the Shavian alphabet and why was it created?

The Shavian alphabet, also called the Shaw alphabet, was designed in 1908 to provide a one‑to‑one correspondence between English sounds and written symbols. Unlike English spelling, which is irregular and historically accumulated, Shavian spells each phoneme with a unique glyph. Shaw, a playwright and vocal critic of linguistic ambiguity, believed that a phonetic script would make reading and writing more transparent and accessible.

Visual or Interactive Example – Side‑by‑Side Comparison

How It Works – The 48‑Letter System

Shavian contains 48 glyphs: 24 consonants, 12 vowels, and 12 ligatures. Each glyph maps to a distinct English phoneme. The Unicode block U+10450–U+1047F holds all characters. Below is a condensed chart that shows the letter name, pronunciation, and code point.

Common English Words in Shavian – Examples

• Shaw: 𐑐𐑖𐑏𐑌
• Phonetic: 𐑈𐑜𐑞𐑐𐑓𐑛𐑑
• Writing: 𐑗𐑈𐑖𐑈𐑇𐑚𐑮𐑱𐑑
• Alphabet: 𐑂𐑤𐑱𐑑𐑕𐑚𐑗𐑙𐑢𐑝𐑛
• Shavian: 𐑐𐑖𐑏𐑌𐑇𐑈𐑝𐑇𐑇𐑜
• Computer: 𐑔𐑚𐑱𐑙𐑕𐑕𐑛𐑑
• English: 𐑕𐑤𐑱𐑯𐑙𐑢𐑝𐑛
• Language: 𐑑𐑻𐑚𐑱𐑙𐑕𐑛
• Reading: 𐑕𐑪𐑻𐑦𐑝𐑛
• Learning: 𐑕𐑰𐑓𐑱𐑛𐑔

Accent and Dialect Notes

Shavian is designed to be accent‑neutral: each sound has a single glyph, regardless of whether a speaker uses Received Pronunciation, General American, or another variety. This universality means that a Shavian text can be read by anyone familiar with the phonetic alphabet, without the ambiguities that arise from regional spelling differences.

Common Mistakes

• Confusing 𐑑 (t) with 𐑑͡ʃ (ch) – the latter is a distinct consonant.
• Using 𐑜 (ɜ) mistakenly for the vowel er – the correct glyph is 𐑚.
• Ignoring ligatures such as 𐑷 (ɹ) which represent blended sounds.
• Assuming 𐑙 (ŋ) can replace 𐑖 (sh) – they represent different phonemes.
• Typing Latin letters instead of Shavian glyphs when the keyboard layout is not set.

Practical Exercise

Convert the following sentence into Shavian. Write your answer below, then check against the answer key.

“The quick brown fox jumps over the lazy dog.”

Answer Key (simplified representation): 𐑕𐑗𐑈 𐑤𐑴𐑛 𐑙𐑩𐑒 𐑑𐑤𐑱𐑑 𐑛𐑶𐑙 𐑈𐑚𐑛 𐑕𐑒𐑕 𐑛𐑦𐑗𐑜.

Limitations or Controversies

Shavian never achieved widespread adoption. Critics argue that learning a new script is a barrier, and that the alphabet’s 48 symbols are still more complex than the 26-letter Latin alphabet. Moreover, its historical context—created for a single author’s reform—limited its promotion. However, modern digital tools have revived interest, and the alphabet’s phonetic precision remains a strong selling point for linguists and educators.

Historical Context

“I have always thought that the English language is a language that should be spelled as it is spoken.” – George Bernard Shaw

George Bernard Shaw introduced the alphabet in the 1908 pamphlet Androcles and the Lion. The script was first printed in 1929, and although it never became mainstream, it inspired subsequent phonetic scripts such as the International Phonetic Alphabet and the Unifon system.

Typing Shavian with Unicode – Tools

Typing Shavian is straightforward once you know the Unicode code points. On Windows you can use Alt+10450–1047F with a numeric keypad, or install a dedicated Shavian keyboard layout from ShawAlphabet.com. Mac users can add the layout via System Preferences → Keyboard → Input Sources and then switch with the menu bar. Android and iOS users can download the Shavian Keyboard app from the Play Store or App Store. For quick typing, the online Shavian keyboard on ShawAlphabet.com lets you click glyphs directly.

Embedding Shavian in HTML and CSS

Because Shavian is a Unicode block, you can embed it directly in HTML. Simply include the glyphs in your markup and ensure that the browser can render them. Most modern browsers support the block, but to guarantee display you can use a web font. One popular choice is Andrzej Ham’s Shavian font (OTF/TTF). To add it:

1. Upload the font file to your site.
2. Add the following CSS to your stylesheet:

   @font-face {
     font-family: 'Shavian';
     src: url('fonts/Shavian-Regular.ttf') format('truetype');
   }
   

3. Use the font in your styles:

   body {
     font-family: 'Shavian', sans-serif;
   }
   

If you prefer not to host a font, you can rely on system fonts that include the range, such as Arial Unicode MS or Segoe UI Symbol. Add a fallback list to your font-family declaration.

To style Shavian text, you can use normal CSS properties: font-size, line-height, letter-spacing, and even text-transform if you want uppercase variants. Because Shavian is written left‑to‑right, no special text direction rules are needed.

Sources and Further Reading

For comprehensive resources, visit ShawAlphabet.com— the official site offers a converter, keyboard, printable charts, and a dictionary. Additional scholarly works include:

• Shaw, G. B. (1908). Androcles and the Lion.
• Foley, D. (2000). The Shavian Alphabet: History and Usage.
• Harley, J. (2015). Phonetic Scripts in the 20th Century.
• Unicode Consortium. (2023). Unicode Standard: Block 10450–1047F.

Conclusion

Shavian offers a clean, phonetic alternative to English spelling. With the tools and guidance from ShawAlphabet.com, you can now convert, type, and style Shavian text in your web projects. Whether you’re drafting a blog post, creating a learning app, or simply experimenting with a new script, the steps above will help you integrate Shavian into your digital workflow with confidence.