要实现西文在垂直排版的日文中直立显示，核心是使用text-combine-upright属性；2. 首先需设置writing-mode: vertical-rl或vertical-lr以启用垂直排版；3. 然后将西文内容用span等元素包裹，并应用text-combine-upright: all或digits n来使其直立；4. 该属性解决了西文在竖排中侧躺导致的阅读困难问题；5. 其局限包括仅支持有限字符数（通常2-4个数字）、浏览器兼容性及布局微调需求；6. 替代方案如transform旋转或使用图片均不推荐，因维护困难且不语义化；7. 实际使用时应结合text-orientation: upright、选择合适字体、进行多浏览器测试并考虑输入内容长度限制，以确保最佳显示效果和可访问性。
CSS中实现日文与西文混排，特别是让西文（数字或短单词）在垂直排版的日文中保持直立，核心就是使用
text-combine-upright这个CSS属性。它能将一系列字符“压缩”进一个字符的宽度空间内，同时保持这些字符的正常阅读方向，极大地提升了垂直排版下混合内容的阅读体验。
解决方案
说实话，刚接触这玩意儿的时候，我也懵了一下。毕竟我们日常接触的网页排版大多是水平的。但当涉及到日文这种有大量垂直排版需求的语言时，
text-combine-upright就显得尤为关键了。
要实现这个效果，通常需要两个步骤：
立即学习“前端免费学习笔记（深入）”；
-
设置垂直书写模式： 这是基础，告诉浏览器文本要竖着排。最常用的是
writing-mode: vertical-rl;
（从右到左垂直书写）或vertical-lr;
（从左到右垂直书写）。 -
应用
text-combine-upright
： 针对需要直立显示的西文或数字，将其包裹在一个元素内（比如<span>
），然后对这个元素应用text-combine-upright
属性。
text-combine-upright
的用法：
text-combine-upright: all;
：这是最直接的用法，会将元素内的所有字符尝试组合起来。但要注意，浏览器可能会根据字符数量和字体大小决定是否真的组合，或者组合多少个。text-combine-upright: digits;
：这个更精确，它只会尝试组合数字。你可以指定组合的数字数量，比如text-combine-upright: digits 2;
会尝试将连续的两个数字组合。默认情况下，它通常会尝试组合2到4个数字。
示例代码：
假设我们有一段日文，其中包含日期和一些英文缩写，我们希望它们在垂直排版时保持直立。
HTML:
<div class="vertical-text"> <p>今日の天気は晴れです。</p> <p>気温は<span class="upright-text">25</span>度、湿度は<span class="upright-text">60%</span>です。</p> <p>プロジェクトの<span class="upright-text">KPI</span>を達成しました。</p> </div>
CSS:
.vertical-text {
writing-mode: vertical-rl; /* 设置垂直书写模式，从右到左 */
font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; /* 示例字体 */
line-height: 1.8; /* 调整行高，让垂直排版更美观 */
text-orientation: upright; /* 确保西文或数字自身是直立的，通常与vertical-rl/lr一起使用 */
}
.upright-text {
text-combine-upright: all; /* 将内部字符组合并直立显示 */
/* 或者更精确地针对数字：text-combine-upright: digits 2; */
}运行这段代码，你会发现“25”、“60%”和“KPI”在垂直排版的日文中，不再是侧躺着，而是端端正正地直立着，这在视觉上是一种巨大的提升。我个人觉得，这种细节处理，真的能体现一个网站的专业度。
为什么需要text-combine-upright
？它解决了什么痛点？
这玩意儿的存在，主要是为了解决一个非常实际且历史悠久的排版痛点：日文、中文等东亚语言在传统上有很多垂直书写的场景，而西文（尤其是数字和短的英文单词）如果直接在垂直流中旋转90度，那简直是阅读噩梦。想象一下，你读着一列竖着的文字，突然冒出一串横着躺倒的数字，你还得歪着头去看，这体验太糟糕了。
text-combine-upright就相当于一个“魔法盒”，它把这些需要“直立”的字符装进去，然后把这个盒子竖着放，但盒子里的内容依然是正向的。它确保了在垂直书写模式下，西文和数字能够保持其固有的水平阅读方向，同时又不会破坏整体的垂直布局流。这对于报纸、杂志、漫画以及很多传统风格的网页设计来说，是不可或缺的。没有它，要不是得手动调整，要不就是牺牲阅读体验，两者都挺让人头疼的。所以，它的出现，可以说是一劳永逸地解决了这个排版难题，让日文与西文的混排变得自然流畅。
text-combine-upright
的局限性与替代方案有哪些？
尽管
text-combine-upright非常强大，但它也不是万能的。我自己在项目里也踩过一些坑，所以这些局限性是需要留意的：
-
字符数量限制： 最常见的问题就是它并非对任意长度的字符串都有效。特别是当你使用
digits
时，浏览器通常只支持组合2到4个数字。如果你尝试组合超过这个限制，它可能就不会生效，或者只组合前几个字符，剩下的依然是侧躺的。比如，digits 2
就是明确告诉浏览器只组合两个数字。对于all
，虽然理论上可以组合更多，但实际效果往往取决于字体和浏览器实现，长一点的英文单词效果可能就不那么理想了。别指望它能把一整句英文都给你竖着排得整整齐齐，那不现实。 - 浏览器兼容性： 虽然现代浏览器（Chrome, Firefox, Safari, Edge）对它的支持已经很不错了，但在一些老旧的浏览器版本上可能依然存在兼容性问题。在实际项目上线前，务必进行充分的兼容性测试。
-
布局微调： 某些情况下，
text-combine-upright
可能会对行高或字符间距产生微妙的影响，需要你根据具体情况进行微调。
至于“替代方案”，我得说，对于在垂直文本流中实现字符直立显示这个特定需求，
text-combine-upright几乎是唯一的、标准且推荐的CSS解决方案。你当然可以尝试一些“黑科技”：
-
手动旋转： 比如使用
transform: rotate(90deg);
来旋转单独的<span>
元素。但这简直是噩梦！你需要精确计算每个元素的宽度、位置，还要处理基线对齐问题，维护起来会让你崩溃。它根本无法像text-combine-upright
那样智能地融入文本流。 - 图片： 把需要直立的数字或英文做成图片。这在早期网页设计中很常见，但显然不灵活，不利于SEO，也增加了HTTP请求。
所以，我的建议是，如果你的核心需求是让西文在垂直日文流中直立显示，就老老实实地用
text-combine-upright。那些所谓的“替代方案”，大多是针对不同问题或在没有这个属性时的无奈之举，效率和效果都大打折扣。
在实际项目中如何优化text-combine-upright
的使用体验？
在实际开发中，光知道怎么用还不够，还得考虑怎么用得更好、更稳妥。以下是我总结的一些优化策略和注意事项：
-
明确使用场景：
text-combine-upright
是为垂直书写模式而生的。如果你的页面是水平排版，那它就毫无用武之地。确保只在writing-mode: vertical-rl;
或vertical-lr;
的环境下使用它。 -
内容限制与提示： 考虑到字符数量的限制，特别是
digits
模式。如果你的内容管理系统允许，可以考虑在输入数字或短语时，给编辑者一些提示，例如“此处的数字建议不超过4位，以获得最佳显示效果”。这能从源头避免一些显示问题。 -
字体选择： 确保你选择的字体对垂直排版有良好的支持。有些字体在处理
text-combine-upright
时表现更好，字形和间距会更协调。例如，日文字体通常会更好地支持这种排版。 -
测试与兼容性： 这是老生常谈但又极其重要的一点。在不同的浏览器（Chrome, Firefox, Safari, Edge）和操作系统上进行测试。虽然现代浏览器支持良好，但偶尔还是会遇到一些小bug或渲染差异。
@supports
CSS规则可以帮助你为不支持的浏览器提供备用样式，虽然现在用到的机会不多了，但知道有这么个工具总没错。 -
辅助属性：
text-orientation: upright;
这个属性虽然不是直接实现混排，但在垂直排版中，它确保了所有字符（包括西文）自身的字形是直立的，而不是旋转的。它与text-combine-upright
配合使用，能让整体效果更完美。 -
可访问性：
text-combine-upright
仅仅是视觉上的呈现，它不会改变底层文本的阅读顺序或语义。所以，对于屏幕阅读器等辅助技术来说，它们仍然会按照正常的文本流来读取，这通常是没问题的。
总的来说，
text-combine-upright是一个非常专一且高效的属性。只要你理解它的设计初衷和局限性，并在合适的场景下使用，它就能帮你轻松搞定日文与西文的混排难题，让你的垂直排版设计更上一层楼。
