文字“站立”的秘密：CSS text
文字“站立”的秘密：CSS text-orientation 深入解析
2025-12-05
在传统的中文、日文和韩文（CJK）垂直排版中，字符的方向非常重要。text-orientation 属性就是用来指定垂直书写模式下字符或字的方向。
语法 text-orientation: mixed | upright | sideways;
值描述mixed默认值。 西方文字（如拉丁字母、数字等）会顺时针旋转 90 度（即保持水平）。东亚文字（CJK）通常保持正常垂直方向。upright所有字符都以“正直”方向显示，就像在水平书写模式下一样，但它们会垂直堆叠。西方文字、数字等也会正直显示，但会占据一个方格，像东亚文字一样。sideways所有行中的内容都作为一个整体顺时针旋转 90 度。适用于将水平文本“平躺”放置在垂直容器中。在使用 text-orientation 时，你可能会遇到一些困惑或兼容性问题。
描述 设置了 text-orientation，但文字方向没有变化。
原因 text-orientation 只在非水平书写模式下生效。如果父元素的 writing-mode 不是 vertical-rl 或 vertical-lr，这个属性就不会起作用。
解决方案 确保你已经正确设置了 writing-mode。
/* 错误示例：没有设置 writing-mode */
.element-a {
text-orientation: upright; /* 不会生效 */
}
/* 正确示例：先设置垂直书写模式 */
.element-b {
writing-mode: vertical-rl; /* 从右到左，垂直排列 */
text-orientation: upright; /* 现在会生效 */
}
描述 在一些较旧的浏览器或非主流浏览器中，text-orientation 不起作用。
原因 这是一个相对较新的 CSS 属性，需要浏览器支持。
解决方案
方法 A (现代浏览器) 使用标准语法。
方法 B (替代方案/降级) 对于需要高度兼容的垂直文本显示，可以考虑使用 transform: rotate() 来模拟整个区块的旋转，但这会影响整个元素及其布局，而非仅字符方向。
如果你的目标是让一小段水平文本块在垂直空间中“站立”起来，而不是进行复杂的 CJK 垂直排版，那么使用 transform: rotate() 来旋转整个元素是一个更兼容、有时也更简单的替代方案。
假设你想在网页的侧边创建一个垂直显示的水平标题。
我的侧边标题
/* 设置一个小的容器来容纳旋转后的元素 */
.vertical-title-container {
/* 示例：放在左侧 */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%); /* 垂直居中 */
/* 重要：设置足够的宽度和高度，或者让内容自己撑开 */
width: 20px;
height: 200px;
overflow: visible; /* 确保旋转后的内容可见 */
}
/* 使用 transform 属性来旋转文本 */
.sideways-text {
/* 基础设置 */
display: block; /* 确保它可以被旋转 */
white-space: nowrap; /* 防止文本换行 */
/* 旋转文本 */
transform: rotate(90deg); /* 顺时针旋转 90 度，使文本垂直显示 */
/* 调整位置，因为旋转是基于元素中心点的 */
/* 可以使用 transform-origin 或 left/top 调整 */
transform-origin: 0 0; /* 将旋转中心移到左上角 */
position: absolute; /* 使 top 和 left 生效 */
top: 0;
left: 20px; /* 根据需要调整，确保它在容器内 */
font-size: 1.5em;
color: #333;
}
/* */
text-orientation只影响字符的方向，常用于复杂的垂直排版，如日文、中文。它不会改变文本流的方向。
transform: rotate()旋转的是整个元素（包括其边界和内容），并会影响其在页面上的位置，但它不会改变字符本身的书写模式。
总的来说，如果你是在做传统的垂直排版（比如古籍或日式漫画风格），请使用 writing-mode 搭配 text-orientation。如果你只是想让一个简短的水平标题立起来，transform: rotate() 通常是更简单、兼容性更好的选择！
css
私有 CSS 伪元素解析：::-webkit-slider-runnable-track 的兼容性困境与自定义组件实践
::-webkit-slider-runnable-track 是一个非标准的 CSS 伪元素，它是 WebKit/Blink 内核浏览器（如 Chrome、Safari、新版 Edge 等）用来定制 HTML 元素（滑块）的轨道（Track）部分的样式。
深度解析 calc-size()：如何优雅地实现 Web 元素的平滑展开
在过去，CSS 的 calc() 函数只能处理确定的数值（比如 100px 或 50%）。如果你想让一个元素从 height: 0 平滑过渡到 height: auto，CSS 动画通常会失效，因为 auto 不是一个具体的数值。calc-size() 的出现就是为了解决这个问题！它允许我们将 固有尺寸关键词（如 auto
彻底掌握 @view-transition：实现单页应用（SPA）无缝动画的关键技术
小提示 @view-transition 目前主要用于单页应用 (SPA) 中的 DOM 状态变化，在 Chrome、Edge 和 Opera 等基于 Chromium 的浏览器中支持较好。对于多页应用 (MPA) 的页面跳转，它需要更高级的配置（或通过框架支持），并且兼容性正在逐步完善中。
前端开发必看：:optional 伪类选择器的进阶指南与代码实战
简单来说，:optional 是专门用来寻找那些没有设置 required 属性的表单元素（比如 、