当前位置： 首页 > news >正文

CSS中的writing-mode属性：解锁文本布局新维度

news 2026/5/20 13:36:23

在网页设计的广阔天地里，CSS（层叠样式表）扮演着至关重要的角色，它赋予了我们塑造网页外观和布局的强大能力。其中，writing-mode属性是一个常被忽视但功能强大的工具，用于控制文本的书写方向和排列方式。今天，我们就来深入探讨这个属性，揭开它在多语言支持、创意布局设计等方面的神秘面纱，并通过实际代码示例带你上手实践。

什么是writing-mode属性？

writing-mode属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。

writing-mode的值
  • horizontal-tb（默认值）：文本从左到右书写，行从上到下排列，这是大多数西方语言的常规模式。
  • vertical-rl：文本从上到下书写，行从右到左排列，常见于东亚竖排文本。
  • vertical-lr：文本从上到下书写，行从左到右排列，不太常用。
  • sideways-rl 和 sideways-lr：这两个值在一些特定场景下使用，比如打印布局，但现代浏览器支持有限。
实战代码示例

假设我们要在一个页面上实现东亚风格的竖排文字效果，下面是如何利用writing-mode属性实现的简单示例：

Html

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Writing Mode 示例</title><style>.vertical-text {writing-mode: vertical-rl;text-align: right; /* 使文本右对齐，符合竖排阅读习惯 */font-family: 'SimSun', sans-serif; /* 使用支持中文的字体 */}</style>
</head>
<body><div class="vertical-text">竖排文字示例，展现古风韵味。
</div></body>
</html>

在这个例子中，我们创建了一个类名为.vertical-text的CSS类，使用writing-mode: vertical-rl;将文本设置为从上到下、从右到左排列，同时通过text-align: right;确保文本在竖直方向上对齐正确。选择合适的字体font-family: 'SimSun', sans-serif;也是保证文本美观的关键。

应用场景
  1. 多语言兼容性：对于需要展示多种书写方向语言的网站，writing-mode能有效支持从左至右、从右至左以及从上至下的文本排列，增强国际化的用户体验。
  2. 创意布局：设计师可以利用writing-mode打破传统的横排文本布局，创造出独特的视觉效果，如竖排标题、创意的导航菜单等。
  3. 响应式设计：在某些特定的屏幕尺寸或设备上，调整文本的书写模式可以优化内容的呈现，特别是在窄屏设备上的阅读体验。
结语

writing-mode属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来writing-mode将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。

相关文章：

CSS中的writing-mode属性：解锁文本布局新维度

在网页设计的广阔天地里&#xff0c;CSS&#xff08;层叠样式表&#xff09;扮演着至关重要的角色&#xff0c;它赋予了我们塑造网页外观和布局的强大能力。其中&#xff0c;writing-mode属性是一个常被忽视但功能强大的工具&#xff0c;用于控制文本的书写方向和排列方式。今天…...

编程日记 2024/5/29 5:24:56

SQL面试题练习 —— 波峰波谷

来源&#xff1a;字节今日头条 目录 1 题目2 建表语句3 题解 1 题目 有如下数据&#xff0c;记录每天每只股票的收盘价格&#xff0c;请查出每只股票的波峰和波谷的日期和价格&#xff1b; 波峰定义&#xff1a;股票价格高于前一天和后一天价格时为波峰 波谷定义&#xff1a;股…...

编程日记 2024/5/29 5:23:56

检索模型预训练方法：RetroMAE

论文title&#xff1a;https://arxiv.org/pdf/2205.12035RetroMAE: Pre-Training Retrieval-oriented Language Models Via Masked Auto-Encoder 论文链接&#xff1a;https://arxiv.org/pdf/2205.12035 摘要 1.一种新的MAE工作流&#xff0c;编码器和解器输入进行了不同的掩…...

编程日记 2024/5/29 5:22:54

OpenHarmony实战开发——宿舍全屋智能开发指南

项目说明 基于OpenAtom OpenHarmony&#xff08;以下简称“OpenHarmony”&#xff09;、数字管家开发宿舍全屋智能&#xff0c;实现碰一碰开门、碰一碰开灯、碰一碰开风扇以及烟感检测。因为各项目开发流程大体相似&#xff0c;本文主要以碰一碰开门为例介绍如何在现有OpenHar…...

编程日记 2024/5/29 5:21:54

等了10年，终于迎来RTX5/RTX4全家桶开源，开源，开源！ 且免费商用

我们的V4, V5, V6 ,V7开发板都配套了大量的RTX4, RTX5教程和案例&#xff0c;从2015年发布首版RTX4内核教程以来&#xff0c;已经整整10年了。 1、制作这个RTX教程和案例&#xff0c;其实也承受了很大的压力&#xff0c;因为只有RTX内核是免费商用的&#xff0c;中间件并不免费…...

编程日记 2024/5/29 5:20:53

Python 读取.shp文件并生成图幅编号

代码适用于需要处理和分析地理空间数据的场景&#xff0c;如城市规划、环境监测或自然资源管理&#xff0c;其中它可以帮助用户读取特定区域的Shapefile文件&#xff0c;确定其地理边界&#xff0c;并基于这些边界计算出按照经纬度5度间隔的图幅编号&#xff0c;进而用于地图制…...

编程日记 2024/5/29 5:19:52

【算法】位运算算法——判断字符是否唯一

题解&#xff1a;判断字符是否唯一(位运算算法) 目录 1.题目2.题解3.位图参考代码4.细节5.总结 1.题目 题目链接&#xff1a;LINK 2.题解 题解有两种方法&#xff0c; 一是做一个哈希数组&#xff0c;去查重&#xff1b; 二是直接用一个变量每一位来对应表示是否有这个字母…...

编程日记 2024/5/29 5:18:51

AAAI2024 基于扩散模型 多类别 工业异常检测 DiAD

前言 本文分享一个基于扩散模型的多类别异常检测框架&#xff0c;用于检测工业场景的缺陷检测或异常检测。 设计SG语义引导网络&#xff0c;在重建过程中有效保持输入图像的语义信息&#xff0c;解决了LDM在多类别异常检测中的语义信息丢失问题。高效重建&#xff0c;通过在潜…...

编程日记 2024/5/29 5:17:50

JavaEE-Spring Controller(服务器控制以及Controller的实现和配置)

Spring Controller 服务器控制 响应架构 Spring Boot 内集成了 Tomcat 服务器&#xff0c;也可以外接 Tomcat 服务器。通过控制层接收浏览器的 URL 请求进行操作并返回数据。 底层和浏览器的信息交互仍旧由 servlet 完成&#xff0c;服务器整体架构如下&#xff1a; Server&…...

编程日记 2024/5/29 5:16:49

页面导出PDF，非可视区域如何解决

const exportToPDF () > {const element document.getElementById(chart-container);if (!element) return;const originalScrollHeight element.scrollHeight;// 临时解除滚动条限制&#xff0c;确保所有内容都可见element.style.height ${originalScrollHeight}px;// …...

编程日记 2024/5/29 5:15:48

Android UI：ViewTree: 监听

文章目录 涉及设计模式 ​​​​​​​​​​​​​​观察者模式+策略模式API源码分析总结涉及设计模式 观察者模式+策略模式 被观察者：ViewTree ViewTree持有一个观察器ViewTreeObserver 系统在ViewRootImpl和View的相关方法中调用ViewTreeObserver上的注册的监听器的方法，…...

编程日记 2024/5/29 5:14:46

【光伏干货】光伏无人机巡检步骤

随着光伏产业的迅速发展和无人机技术的日益成熟&#xff0c;光伏无人机巡检已成为提高光伏电站运维效率、降低运维成本的重要手段。本文将详细介绍光伏无人机巡检的步骤&#xff0c;帮助读者更好地理解和应用这一技术。 一、前期准备 1、设备检查&#xff1a;对无人机及其相关…...

编程日记 2024/5/29 5:13:46

『大模型笔记』从头开始代码构建GPT！

从头开始代码构建GPT！ 文章目录 一. 从头开始代码构建GPT！二. 参考文献一. 从头开始代码构建GPT！ 我们构建了一个生成式预训练Transformer (GPT)，遵循论文《Attention is All You Need》和OpenAI的GPT-2 / GPT-3的方法。我们讨论了与ChatGPT的联系，ChatGPT已经风靡全球。我…...

编程日记 2024/5/29 5:12:45

idea的project structure下project [lauguage ]()level 没有java的sdk17选项如何导入

idea的project structure下project lauguage level 没有java的sdk17选项如何导入 别导入了&#xff0c;需要升级idea版本。idea中没有project language level没有17如何添加 - CSDN文库 别听这文章瞎扯淡 2021版本就是没有&#xff0c;直接卸载升级到最新版本就可以了。没办法…...

编程日记 2024/5/29 5:11:44

JavaScript数据类型与转换

JavaScript是一种弱类型语言&#xff0c;在定义变量的时候不用规定数据的类型&#xff0c;但这部表示JavaScript没有规定数据类型。 数值 JavaScript中数值类型不区分浮点数与整数&#xff0c;所有的数值都以浮点型来表示。另外JavaScript核心&#xff0c;Math还提供了大量的…...

编程日记 2024/5/29 5:10:43

三十、openlayers官网示例解析Double click, Drag and Zoom——第二次点击鼠标拖拽缩放地图效果、取消地图双击放大事件

这篇展示了如何在地图上添加第二次按下鼠标移动鼠标实现拖拽缩放地图效果。 官网demo地址&#xff1a; Double click, Drag and Zoom 官网介绍文字的翻译如下&#xff1a; 示例比较简单&#xff0c;直接贴代码&#xff1a; const map new Map({//添加第二次点击拖拽缩放地图i…...

编程日记 2024/5/29 5:09:42

前端基础入门三大核心之网络安全篇：TLS/SSL的魔法之旅

前端基础入门三大核心之网络安全篇&#xff1a;TLS/SSL的魔法之旅 TLS/SSL&#xff1a;数据安全的守护神工作原理&#xff1a;四步走&#xff0c;安全到家1. 握手&#xff0c;你好吗&#xff1f;代码示例&#xff08;伪代码&#xff09;&#xff1a;客户端发起握手请求 2. 身份…...

编程日记 2024/5/29 5:08:40

Flutter 中的 SnackBarAction 小部件：全面指南

Flutter 中的 SnackBarAction 小部件&#xff1a;全面指南 在 Flutter 中&#xff0c;SnackBar 是一种流行的用于提供轻量级反馈的方式&#xff0c;它可以在屏幕上短暂显示消息。SnackBarAction 则是与 SnackBar 结合使用的一种按钮组件&#xff0c;允许用户对显示的消息做出响…...

编程日记 2024/5/29 5:07:39

Point-Nerf 理论笔记和理解

文章目录 什么是point nerf 和Nerf 有什么区别Point Nerf 核心结构有哪些&#xff1f;什么是point-based radiance field? 点云位置以及置信度是怎么来Point pruning 和 Point Growing 什么是point nerf 和Nerf 有什么区别 基本的nerf 是通过过拟合MLP来完成任意视角场景的重…...

编程日记 2024/5/29 5:06:38

深度学习中的梯度消失和梯度爆炸问题

在深度学习领域&#xff0c;随着模型层数的增加&#xff0c;我们常常会遇到两个棘手的问题&#xff1a;梯度消失&#xff08;Vanishing Gradients&#xff09;和梯度爆炸&#xff08;Exploding Gradients&#xff09;。这两个问题严重影响了深度神经网络的训练效率和性能。本文…...

编程日记 2024/5/29 5:05:37

Scandit Barcode Scanner：这家瑞士公司的SDK，如何让淘宝、京东的扫码快人一步？

Scandit Barcode Scanner&#xff1a;解码瑞士技术如何重塑全球扫码体验 在移动互联网时代&#xff0c;扫码已成为连接物理世界与数字世界的无形桥梁。从超市收银台到物流仓库&#xff0c;从零售门店到电商平台&#xff0c;条码扫描技术默默支撑着现代商业的高效运转。而在这背…...

编程新知 2026/5/20 13:08:32

别再只会用OpenCV的equalizeHist了！用Python实战图像增强，让你的目标检测模型精度提升一个台阶

突破OpenCV基础操作&#xff1a;Python图像增强实战与目标检测精度优化 在目标检测项目的实际开发中&#xff0c;我们常常遇到这样的困境&#xff1a;模型在标准测试集上表现优异&#xff0c;一旦部署到真实场景&#xff0c;面对复杂光照、低对比度的图像时&#xff0c;性能却…...

编程新知 2026/5/20 13:03:52

2026年最新推荐 很多一线老师都在用的英语作文批改工具

行业共性痛点拆解我们团队做英语教育技术落地5年&#xff0c;接触过全国上千位初高中英语老师&#xff0c;发现作文批改是大家公认的效率洼地。人工批改模式下&#xff0c;一个45人班的作文&#xff0c;每篇要改语法、逻辑、表达、扣题四个维度&#xff0c;最少花3分钟&#xf…...

编程新知 2026/5/20 12:05:45

解密网易云音乐NCM文件：3分钟掌握ncmdump核心技术与实战应用

解密网易云音乐NCM文件&#xff1a;3分钟掌握ncmdump核心技术与实战应用 【免费下载链接】ncmdump 转换网易云音乐 ncm 到 mp3 / flac. Convert Netease Cloud Music ncm files to mp3/flac files. 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdump ncmdump作为C实…...

编程新知 2026/5/20 11:56:55

英雄联盟皮肤修改器R3nzSkin：从内存钩子到游戏逆向的完整技术指南

英雄联盟皮肤修改器R3nzSkin&#xff1a;从内存钩子到游戏逆向的完整技术指南 【免费下载链接】R3nzSkin Skin changer for League of Legends (LOL) 项目地址: https://gitcode.com/gh_mirrors/r3n/R3nzSkin R3nzSkin是一款专为《英雄联盟》设计的开源游戏皮肤修改器&a…...

编程新知 2026/5/20 10:32:30

思源宋体TTF：5分钟掌握免费商用中文字体的完整使用指南

思源宋体TTF&#xff1a;5分钟掌握免费商用中文字体的完整使用指南 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 如果你正在寻找一款既专业又免费的中文字体&#xff0c;那么思源宋体…...

编程新知 2026/5/20 9:23:38

在Matlab中绘制横直方图

在“在Matlab中绘制二维直方图”和“在Matlab中绘制三维直方图”中&#xff0c;得到的直方图都是竖直方向的图形&#xff0c;即竖直方图。这篇博文在此基础上绘制横直方图&#xff0c;只需要把bar( )函数和 bar3( )函数分别调整为barh( )函数和 bar3h( )函数即可。在命令窗口输…...

编程新知 2026/5/20 8:50:00

Ubuntu虚拟机磁盘空间耗尽导致MySQL启动失败的系统恢复与预防指南

1. 问题现象与核心原因剖析最近在折腾Ubuntu虚拟机时&#xff0c;遇到了一个挺典型的开机故障&#xff1a;系统启动时卡住&#xff0c;屏幕上赫然显示着“Failed to start MySQL Community Server”的错误信息&#xff0c;紧接着系统就停滞不前&#xff0c;无法进入图形界面。这…...

编程新知 2026/5/20 8:37:21

HNU 计算机系统 bomblab：从GDB断点到链表重构的逆向实战

1. 逆向工程实战&#xff1a;从零开始拆解二进制炸弹 第一次接触bomblab时&#xff0c;我盯着终端里那个名为"bomb"的可执行文件发呆了十分钟。这个看似普通的Linux程序就像个黑盒子&#xff0c;里面藏着六个需要密码才能解除的"炸弹"。作为计算机系统课程…...

编程新知 2026/5/20 6:54:01

告别树莓派5？手把手教你用OrangePi 5搭建家庭媒体中心（基于RK3588）

告别树莓派5&#xff1f;手把手教你用OrangePi 5搭建家庭媒体中心&#xff08;基于RK3588&#xff09; 在智能家居日益普及的今天&#xff0c;家庭媒体中心已成为许多科技爱好者的必备设备。传统的解决方案往往依赖于昂贵的商业NAS或性能有限的树莓派&#xff0c;而基于RK3588芯…...

编程新知 2026/5/20 6:42:27