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

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

news 2025/11/1 19:21:47

在网页设计的广阔天地里，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

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/10/27 9:35:00

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/10/26 12:46:24

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/11/1 4:42:14

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/10/18 7:13:10

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/10/28 23:13:01

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/10/18 13:32:22

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2025/10/28 15:15:54

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34