首页 > 其他分享 >网页支持传统蒙古文排版样式HTML+CSS

网页支持传统蒙古文排版样式HTML+CSS

时间:2023-04-13 14:22:40浏览次数:39  
标签:vertical writing HTML lr mode 123456 排版 CSS

传统蒙古文排版跟大部分文字排版不一致,需要从上到下书写,然后从左到右的排版。

样式文件如下:

.vertical-text {
-webkit-writing-mode: vertical-lr;
-moz-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
text-orientation: sideways-right;
-webkit-text-orientation: sideways-right;
}

html代码例子:

<div class="vertical-text">
<ul>
<li>1、 ᠠ  ᠡ   ᠢ  ᠣ  ᠤ  ᠥ  ᠦ a e i o v w u 123456</li>
<li>2、 ᠠ  ᠡ   ᠢ  ᠣ  ᠤ  ᠥ  ᠦ a e i o v w u 123456</li>
<li>3、 ᠠ  ᠡ   ᠢ  ᠣ  ᠤ  ᠥ  ᠦ a e i o v w u 123456</li>
<li>4、 ᠠ  ᠡ   ᠢ  ᠣ  ᠤ  ᠥ  ᠦ a e i o v w u 123456</li>
<li>5、 ᠠ  ᠡ   ᠢ  ᠣ  ᠤ  ᠥ  ᠦ a e i o v w u 123456</li>
</ul>
</div>

效果展示:

完美兼容各种浏览器以及客户端浏览。

 

标签:vertical,writing,HTML,lr,mode,123456,排版,CSS
From: https://www.cnblogs.com/erdeni/p/17314644.html

相关文章

  • 3、Web前端学习规划:CSS - 学习规划系列文章
          CSS作为Web前端开发的第2种重要的语言,笔者建议在学了HTML之后进行。CSS主要是对于HTML做一个渲染,其也带了一些语言语法函数,功能也非常强大。 1、简介;CSS(层叠样式表)是一种用于描述网页样式的语言。它可以控制网页中的字体、颜色、布局、背景等方面的样式......
  • vscode如何设置HTML/CSS/JS保存后自动格式化?
    具体操作:点击小齿轮,选择设置按钮  第二步:点击右上角按钮,进入设置页面  第三步:粘贴自动保存的js代码!  "editor.formatOnType":true,"editor.formatOnSave":true, ......
  • css 常用的文本样式、选择器、浮动和定位
    常用的文本样式~color设置文字的颜色color:red~font-size设置文字的大小font-size:12px~font-family设置文字的字体font-family:微软雅黑~font-style设置字体是否倾斜font-style:“normal”  不......
  • vue pc使用htmlCanvas Jspdf 实现点击将页面生成图片并转成pdf下载
    <template><divid="main"ref="workbench"v-loading="loading"class="echartsPdf">需要的内容</div></template><script>importhtml2canvasfrom'html2canvas'importJspdf......
  • CSS层叠样式表
    目录CSS层叠样式表CSS选择器1.CSS基本选择器2.CSS组合选择器3.分组与嵌套4.属性选择器5.伪类选择器6.为元素选择器选择器优先级CSS样式调节CSS层叠样式表主要用来调节html标签的各种样式"""思考:页面都是由HTML构成的并且页面上有很多相同的HTML标签但是相同的HTML标签在不......
  • python - html转pdf
    1.安装pdfkitpip3installpdfkit2.安装wkhtmltopdf下载wkhtmltopdf安装包https://wkhtmltopdf.org/downloads.html安装后在系统Path添加wkhtmltopdf的bin路径3.简单使用将本地html转pdfimportpdfkit#如果html里引用了外部的文件,则需要添加以下参数wkhtmltopdf_o......
  • vue项目通过外部配置文件读取接口地址- 在webpack-index.html模板中使用环境变量
    概述:在index.html模板中判断当前环境,处于开发环境下时读取process环境变量、处于生产环境下时读取根目录配置文件(./config.js),两种环境下将配置统一挂载到window全局变量上(SET_CONFIG)config.jswindow.SITE_CONFIG={appTitle:'系统测试',version:'1.0.0',apiURL:''......
  • CSS基础:块状元素、内联元素、内联块状元素(行内元素)
    css基础:块元素、内联元素、内联块元素CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。1.常用的块状元素有:<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>2.常用的内联元素有:<a>、<s......
  • CSS修改input中的placeholder默认颜色
    使用input-placeholder属性来修改placeholder的默认颜色:为了兼容不同的浏览器内核,要添加不同的前缀input::input-placeholder{ color:#999;}input::-webkit-input-placeholder{ /*Chrome*/ color:#999;}input::-moz-placeholder{ /*MozillaFirefo......
  • CSS杂谈——flex布局里面的auto到底多长
    本篇博客将以“flex布局里设置auto的区块怎么让文案超出省略的问题”作为切入点,来分析一下flex布局里面各子项的具体长度到底怎么计算。从需求出发谈flex布局我们有一个H5项目,类似于微信的通讯录界面,前面是头像,后面是昵称。所以我们一开始的代码是这么写的:<divst......