How to Use Shavian Unicode in CSS for Web Accessibility

Shavian—named after playwright George Bernard Shaw—offers a perfectly phonetic alternative to English spelling. ShawAlphabet.com is the only online hub that brings this elegant script into the digital age with converters, virtual keyboards, and teaching tools. This article will walk you through how to embed Shavian in your CSS, convert text, type in the script, and keep your web content accessible to everyone.

What is the Shavian Alphabet and Why Was It Created?

The Shavian alphabet, formally known as “Shaw’s New Alphabet,” was devised in 1906 by Shaw as a response to the irregularities of English orthography. It contains 48 characters: 24 consonants, 12 vowels, and 12 ligatures, each representing a single phoneme. The goal was to create a one‑to‑one correspondence between spoken sounds and written symbols, eliminating the ambiguity that plagues traditional spelling.

Visual or Interactive Example: English vs. Shavian

How It Works: The Phonetic Spelling System

The alphabet is divided into three groups:

• Consonants (24) – Each symbol is a single consonant sound.
• Vowels (12) – Represent long and short vowel phonemes.
• Ligatures (12) – Combined symbols for common digraphs (e.g., 𐑈 for “sh”, 𐑶 for “ng”).

Below is a condensed chart of the most common letters and their IPA values. For the full chart, see the Unicode chart on ShawAlphabet.com.

Common English Words in Shavian

1. hello – 𐑧𐑤𐑪
2. friend – 𐑓𐑮𐑦𐑕𐑛
3. beautiful – 𐑚𐑴𐑑𐑦𐑓𐑰𐑑
4. technology – 𐑑𐑧𐑒𐑊𐑟𐑖𐑖
5. university – 𐑩𐑯𐑰𐑶𐑝𐑟𐑙
6. question – 𐑠𐑴𐑯𐑴𐑕𐑯
7. history – 𐑣𐑦𐑖𐑕
8. music – 𐑥𐑰𐑕𐑦𐑟
9. philosophy – 𐑓𐑯𐑟𐑵𐑕𐑷
10. environment – 𐑦𐑯𐑦𐑛𐑧𐑚𐑬𐑔

Accent and Dialect Notes

Because Shavian maps phonemes directly, it is inherently accent‑neutral. A word like “tomato” can be written the same way whether you pronounce it “tuh-mah-to” (American) or “tah-moh-to” (British). The script captures the sound, not the regional variation, making it ideal for global learners.

Common Mistakes Beginners Make

• Confusing 𐑈 (sh) with 𐑦 (i) – both look similar but serve different purposes.
• Forgetting ligatures – e.g., writing 𐑧𐑒 instead of 𐑶 for the “ng” sound.
• Misplacing the “r” sound – 𐑫 is a rolled “r”; 𐑭 is a weak “r”.
• Mixing uppercase and lowercase – unlike Latin, Shavian case is not used for grammatical purposes.
• Ignoring vowel length – 𐑱 (short a) vs. 𐑧 (long a) can change meaning.

Practical Exercise

Convert the sentence: “The quick brown fox jumps over the lazy dog.” into Shavian. Use the chart above to help you.

Answer: 𐑑𐑼 𐑦𐑑𐑝𐑽 𐑚𐑮𐑪𐑕𐑛 𐑓𐑴𐑕 𐑛𐑘𐑧𐑓𐑕 𐑴𐑝𐑟 𐑑𐑼 𐑤𐑨𐑟𐑦 𐑛𐑴𐑜.

Limitations or Controversies

Despite its logical design, Shavian has never gained mainstream traction. Critics point to the cost of learning a new script, the lack of typefaces, and the entrenched use of Latin characters. However, the alphabet remains a fascinating case study in phonetic reform and is widely used in academic circles, linguistic software, and by enthusiasts.

Historical Context

George Bernard Shaw proposed the alphabet in 1906, publishing it in his 1913 pamphlet “A New Alphabet.” The first practical text, “Androcles and the Lion,” appeared in 1919. Shaw’s motivation was to improve literacy and reduce the cognitive load of spelling. The alphabet was later encoded in Unicode (U+10400–U+1044F) in 2005, making it digitally viable.

Shavian Unicode in CSS for Web Accessibility

Embedding Shavian in a web page involves two main steps: (1) loading a webfont that contains the Shavian glyphs, and (2) using CSS to apply that font to the desired elements.

1. Load the Shavian Font

Choose a free Shavian font such as Shavian by Paul Thomas. Host the font files (TTF/WOFF2) on your server or use a CDN. Then add an @font-face rule:

@font-face {
  font-family: 'Shavian';
  src: url('fonts/Shavian-Regular.woff2') format('woff2'),
       url('fonts/Shavian-Regular.ttf') format('truetype');
  unicode-range: U+10450-1047F;
  font-weight: normal;
  font-style: normal;
}

2. Apply the Font with CSS

Use a class or lang attribute to target Shavian text:

.shavian {
  font-family: 'Shavian', monospace;
  font-size: 1.2em;
}
/* Or using the lang attribute */
[lang="shv"] {
  font-family: 'Shavian', monospace;
}

Remember to specify a fallback (e.g., monospace) for browsers that cannot load the custom font. This ensures graceful degradation.

3. Accessibility Considerations

• Screen Readers: Use lang="shv" so that the screen reader knows the text is Shavian and will attempt to pronounce it using a Shavian pronunciation model if available.
• Alternative Text: For images containing Shavian, provide an alt attribute with the phonetic transcription or a plain‑text translation.
• Keyboard Navigation: Ensure that Shavian text is focusable if it contains interactive elements.
• Contrast & Readability: Shavian characters are designed to be distinct, but check contrast ratios to meet WCAG 2.1 AA.

Using ShawAlphabet.com Tools

• Converter – Paste English text and instantly receive Shavian output. The tool also shows the Unicode code points for each character.
• Virtual Keyboard – An on‑screen Shavian keyboard that supports all 48 letters. Click or tap to insert characters into your document.
• Typing Practice – Interactive lessons that provide instant feedback on accuracy and pronunciation.
• Flashcards – Download printable flashcards for offline study.
• Downloadable Fonts – Direct links to the latest Shavian TTF/WOFF2 files.

Typing Shavian with Unicode

For advanced users who prefer a physical keyboard, you can type Shavian using Unicode input methods:

• Windows: Hold Alt and type the hex code on the numeric keypad (e.g., Alt+10450 for 𐑀). Enable Unicode Input in the language bar.
• macOS: Hold Option and type the hex code (e.g., Option+10450). Alternatively, use the macOS Unicode Hex Input layout.
• Linux: Press Ctrl+Shift+U, then type the hex code and hit Enter.
• Online: Use Unicode‑Table.com to copy characters directly.

Conclusion

Shavian’s logical design makes it an excellent tool for learners, linguists, and web developers seeking a clear, phonetic script. By combining ShawAlphabet.com’s conversion and typing tools with CSS webfonts and accessibility best practices, you can seamlessly integrate Shavian into modern web projects. Start today, experiment with the converter, and explore how a simple Unicode range can transform the way we write and read.