The ‘text-combine-upright’ Property: Combining Characters into a Single Upright Character.

The ‘text-combine-upright’ Property: Combining Characters into a Single Upright Character (A Lecture!)

(Welcome music fades, a spotlight illuminates a slightly disheveled professor with overly enthusiastic hand gestures. He’s wearing a bow tie that is slightly askew.)

Professor Quentin Quirke: Good morning, future web wizards and CSS sorcerers! Welcome, welcome! Today, we embark on a journey – a quest, if you will – into the somewhat obscure, yet incredibly powerful, realm of the text-combine-upright property.

(Professor Quirke strides back and forth, occasionally bumping into the lectern.)

Now, I know what you’re thinking. "Professor Quirke, text-combine-upright? Sounds like something I’d find in a dusty tome in the back of a forgotten library!" And you wouldn’t be entirely wrong. It’s not exactly the rockstar of CSS properties like display: flex or border-radius, but trust me, understanding it can unlock some seriously impressive typographic feats, particularly when dealing with East Asian languages.

(He pauses for dramatic effect, adjusts his bow tie, and nearly knocks over a stack of papers.)

So, buckle up! We’re about to dive deep into the nitty-gritty details of how this property works, why you should care about it, and how to wield its power for good (and maybe a little bit of mischievous design, because why not?).

I. The Problem: When Numbers Don’t Play Nice in Vertical Text

(A slide appears showing vertical Japanese text with awkwardly rotated numbers.)

Professor Quirke: Imagine you’re designing a stunning website for a traditional Japanese tea house. You’ve painstakingly crafted beautiful vertical text, evoking the elegance and sophistication of ancient calligraphy. But then… disaster strikes! 💥 The numbers – the dates, the prices, the phone numbers – they stubbornly rotate 90 degrees, sticking out like a sore thumb! They ruin the aesthetic, like a clown at a funeral! 🤡

(He throws his hands up in mock despair.)

This is a common problem when working with vertical text layouts in languages like Japanese, Chinese, and Korean. Numbers, and sometimes other characters, simply don’t play well when forced to stand on their heads. They need to be… tamed.

II. The Solution: text-combine-upright to the Rescue!

(A slide appears showcasing the text-combine-upright property with before-and-after examples.)

Professor Quirke: Fear not, my friends! For there is a solution, a shining beacon of hope in the murky waters of typographic woes! That solution is text-combine-upright.

This property allows you to combine multiple characters, typically numbers or abbreviations, into a single, upright glyph within vertical text. Think of it as forcing those unruly characters to hold hands and stand tall, presenting a unified and harmonious front. 🤝

(He beams proudly.)

III. Understanding the Syntax

(A slide appears with the syntax of the text-combine-upright property.)

Professor Quirke: Let’s dissect the syntax, shall we? It’s not as scary as it looks, I promise.

/* Keyword values */
text-combine-upright: none; /* Default value. No combining. */
text-combine-upright: all;  /* Combines all adjacent characters into a single glyph. */

/* Deprecated values (but still worth knowing about!) */
text-combine-upright: digits; /* Only combines digits. Deprecated! */

/* Global values */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: revert;
text-combine-upright: revert-layer;
text-combine-upright: unset;

(Professor Quirke points to the slide with a laser pointer.)

• none: This is the default value. No combining occurs. The characters remain separate and may be rotated in vertical text. Think of it as letting those characters run wild! 🤪
• all: This is the most commonly used value. It attempts to combine all adjacent characters into a single, upright glyph. This is your go-to for taming those numbers! 🦁
• digits: (DEPRECATED!) This value used to combine only digits. It’s largely obsolete now, and you should use all instead. Consider it a historical artifact, a relic of a bygone era. 🏺
• Global Values: These are the standard CSS global values that control inheritance and resetting of the property. We won’t delve too deeply into these today, but they’re good to be aware of.

Important Note: Browser support for text-combine-upright has been a bit… patchy over the years. It’s generally well-supported in modern browsers, but always test thoroughly, especially if you’re targeting older versions.

(Professor Quirke shrugs apologetically.)

IV. Practical Examples: Putting text-combine-upright to Work

(A series of slides showcasing code examples with before-and-after results.)

Professor Quirke: Alright, enough theory! Let’s get our hands dirty with some practical examples.

Example 1: Taming the Dates in Japanese Vertical Text

<p class="vertical-text">
  令和5年10月27日
</p>

<style>
.vertical-text {
  writing-mode: vertical-rl; /* Vertical text, right-to-left */
  text-orientation: upright; /* Make characters upright */
}

.vertical-text span {
  text-combine-upright: all; /* Combine the numbers */
}
</style>

(Explanation):

• We have a paragraph with Japanese text representing a date (Reiwa 5th year, October 27th).
• writing-mode: vertical-rl sets the text to vertical, right-to-left.
• text-orientation: upright ensures that the characters themselves are upright, not rotated.
• The crucial part: text-combine-upright: all applied to the span element surrounding the year causes the numbers (5) to combine into a single, upright glyph.

Before: The "5" is rotated 90 degrees and looks awkward.
After: The "5" is upright and combined into a single glyph, looking much more natural. ✨

(Professor Quirke puffs out his chest proudly.)

Example 2: Formatting Phone Numbers in Chinese Vertical Text

<p class="vertical-text">
  电话：138-1234-5678
</p>

<style>
.vertical-text {
  writing-mode: vertical-lr; /* Vertical text, left-to-right */
  text-orientation: upright;
}

.vertical-text span {
  text-combine-upright: all; /* Combine the numbers */
}
</style>

(Explanation):

• Similar to the previous example, this code displays a Chinese phone number in vertical text.
• writing-mode: vertical-lr sets the text to vertical, left-to-right.
• text-combine-upright: all applied to the span element surrounding the phone number combines the digits into upright glyphs.

Before: The phone number digits are rotated, making them difficult to read.
After: The phone number digits are combined and upright, significantly improving readability. 👌

(Professor Quirke claps his hands together enthusiastically.)

Example 3: Combining Abbreviations (Use with Caution!)

<p class="vertical-text">
  <span>CEO</span>
</p>

<style>
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.vertical-text span {
  text-combine-upright: all;
}
</style>

(Explanation):

• This example attempts to combine the letters "CEO" into a single glyph.
• While text-combine-upright: all will try to combine the letters, the results may not always be desirable or visually appealing.

Before: The "C", "E", and "O" are separate and upright.
After: The "C", "E", and "O" are combined, but the resulting glyph might look squished or distorted. 😬

(Professor Quirke raises a cautionary finger.)

Important Note: Using text-combine-upright on non-numeric characters can lead to unpredictable results. It’s best to reserve it primarily for numbers. Experimentation is key, but be prepared for some… interesting outcomes.

V. Styling Combined Characters

(A slide showing how to style combined characters.)

Professor Quirke: Now, you might be wondering, "Professor Quirke, can I style these combined characters? Can I make them bolder? Can I change their color? Can I give them tiny hats?"

(He pauses for laughter.)

The answer, my friends, is a resounding… sort of.

You can generally apply basic text styling properties like font-size, font-weight, color, and font-family to the combined characters. However, some properties might not behave exactly as expected, especially those related to spacing and layout.

Example:

.vertical-text span {
  text-combine-upright: all;
  font-size: 1.2em; /* Increase the size */
  font-weight: bold; /* Make it bold */
  color: red; /* Make it red! */
}

(Explanation):

This CSS will increase the size, make the combined characters bold, and change their color to red.

(Professor Quirke nods approvingly.)

VI. When Not to Use text-combine-upright

(A slide listing situations where text-combine-upright might not be the best choice.)

Professor Quirke: Like any powerful tool, text-combine-upright has its limitations. There are situations where it’s best to avoid it altogether.

• When the combined characters become unreadable: If the resulting glyph is too small or distorted, it defeats the purpose of improving readability.
• When dealing with complex scripts: text-combine-upright is primarily designed for combining simple characters like numbers. It may not work well with more complex scripts or ligatures.
• When you need precise control over spacing: The property offers limited control over the spacing between the combined characters. If you need fine-grained control, consider alternative approaches.
• When targeting very old browsers: Although modern browser support is good, very old browsers may not support text-combine-upright at all. Always test thoroughly!

(He shakes his head knowingly.)

VII. Alternatives to text-combine-upright

(A slide showcasing alternative approaches to handling numbers in vertical text.)

Professor Quirke: What if text-combine-upright isn’t the right fit for your project? Fear not! There are other ways to skin this typographic cat.

• Using full-width characters (CJK characters): East Asian languages have full-width (also known as CJK) characters for numbers. These characters are designed to fit naturally within vertical text layouts. This is often the preferred solution.
• Manually rotating characters with CSS transforms: You can use CSS transforms like rotate() to manually rotate individual characters. This gives you precise control over the rotation, but it can be tedious and time-consuming.
• Using SVG: SVG offers a high degree of control over text rendering. You can use SVG to create custom glyphs or manipulate individual characters with precision.

(Professor Quirke gestures towards the slide.)

VIII. Browser Compatibility: A Word of Caution

(A slide showing a table of browser compatibility for text-combine-upright.)

Professor Quirke: As I mentioned earlier, browser compatibility for text-combine-upright has been a bit of a rollercoaster ride. While modern browsers generally support it well, it’s crucial to check compatibility tables (like those on MDN Web Docs) and test your implementation thoroughly, especially if you’re targeting older browsers.

(He sighs dramatically.)

IX. The Future of Vertical Text Layout

(A slide showing futuristic designs with innovative vertical text layouts.)

Professor Quirke: The web is constantly evolving, and so is the way we handle vertical text layout. New CSS features and techniques are emerging all the time, offering greater flexibility and control. Keep an eye out for advancements in areas like:

• Improved writing-mode and text-orientation support: As browsers continue to refine their implementations of these properties, we can expect more consistent and predictable behavior.
• Advanced typographic features: CSS is gradually incorporating more advanced typographic features, such as support for ligatures and contextual alternates, which can further enhance vertical text rendering.
• Variable fonts: Variable fonts offer a wide range of customization options, allowing you to fine-tune the appearance of your text for optimal readability in vertical layouts.

(Professor Quirke smiles optimistically.)

X. Conclusion: Embrace the Power of text-combine-upright (Responsibly!)

(A final slide summarizing the key takeaways of the lecture.)

Professor Quirke: And there you have it! A whirlwind tour of the fascinating world of text-combine-upright.

(He pauses for a moment, gathering his thoughts.)

Remember, text-combine-upright is a powerful tool for taming those unruly characters in vertical text layouts. Use it wisely, experiment creatively, and always prioritize readability and accessibility. And most importantly, have fun! 🎉

(He bows deeply.)

Professor Quirke: Thank you, my aspiring web wizards! Go forth and create beautiful, typographically sound websites! Class dismissed!

(Outro music begins to play as Professor Quirke gathers his papers and accidentally knocks over the lectern. Fade to black.)

Key Takeaways:

• text-combine-upright combines multiple characters into a single, upright glyph in vertical text.
• It’s primarily used to handle numbers and abbreviations in East Asian languages.
• The most common value is text-combine-upright: all;.
• Browser support is generally good, but always test thoroughly.
• Consider alternatives like full-width characters or CSS transforms for more precise control.
• Use text-combine-upright responsibly, prioritizing readability and accessibility.
• Don’t give the combined characters tiny hats. (Just kidding… maybe.) 🎩

(The screen displays a final image of a single, upright number wearing a tiny hat.)