首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

网页字体排版的哲学:段首缩排或段间距

但是,段首缩排似乎一直是书籍印刷的标准段落排版样式,难道印刷行业一直错了? 这时,我们就要考虑表现要求。书籍印刷的表现要求是专注文字内容,因此阅读体验应当置于美观之上。...对于网页,与纸质书的翻页不同,它是竖直方向的连续滚动。当网页快速滚动时,就使段落上下相连的段首缩排显得繁密易懵,而段落上下间隔的段间距则显得结构简明。...下面给出几种排版样式的模拟情形(第 2 表示的是上一段落的结尾),大家可以自行感受。 段间距: 1 2 3 4 5 6 7 -- 嗯,嗯,嗯。—— 啊!?...这就导致一段首缩排 CSS 代码可能要另外的许多行来弥补,而段间距却无需添加其它代码。 为什么浏览器自带的默认样式是段间距排版呢?待考。暂时先用本文上面的分析大胆猜测一下:因为网页是滚动而非翻页。...另外,可能有疑问:不就多了两代码,段首缩排的实现不比段间距麻烦多少啊?

1.7K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    一、HTML

    ,第二“”标签和最后一“”定义html文档的整体,“”标签中的‘lang=“en”’定义网页的语言为英文,定义成中文是'lang="zh-CN"',不定义也没什么影响...html段落、换行与字符实体 html段落 标签定义一个文本段落,一个段落含有默认的上下间距,段落之间会用这种默认间距隔开,代码如下: html换行 代码中成段的文字,直接在代码中回车换行,在渲染成网页时候不认这种换行,如果真想换行,可以在代码的段落中插入来强制换行,代码如下:   一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用...页面内定义了“id”或者“name”的元素,可以通过a标签链接到它的页面滚动位置,前提是页面要足够高,有滚动条,且元素不能在页面顶部,否则页面不会滚动

    4.4K40

    iOS新闻类App内容页技术探索

    目录 - 技术方案选择 - 1.WebView类型选择 不同于微博,新闻类App的内容以段落性的文字为主,配合段落间的图片、富媒体等。...反观WKWebView,基于独立进程,不会占用App的内存计算,同时也不会导致主App Crash。所以在系统级的稳定性上,WKWebView有着极大的优势。...内容页中全部组件的滚动复用 在解决了内容WebView中非文字类组件的Native化、滚动复用之后,我们将实现思想运用到包含Native扩展区的,内容页整体架构中。...Controller只需要实现组件间通信的delegate,选择性的实现例如controller生命周期、webview关键调、以及滚动复用相关的方法即可。...同时从使用的角度来说,重复进入同一篇文章的场景也不会频繁的出现。

    2.9K00

    niRvana · 轻拟物主题4.8完美版

    段落文本标记: Gutenberg默认不支持段落内部分文本设置色彩。本主题进行了扩展,可以设置文本背景、颜色等。就像这样的标记 还有更多方便的小工具等你来尝试!...包含文档,详见:主题压缩包内的文档说明 2、废弃:原有的“不刷新加载页面”调方法,使用新的“ajax_render_complete”钩子。用法详见第1条。...pf-post-card-meta-end”(文章列表卡片meta结束) “pf-post-card-meta-before-comments”(文章列表卡片meta评论前) 2、新增:Gutenberg编辑器段落文字标记功能...切换到其他页面再次评论时不需要多次输入昵称 3、去除了一个无用的后台设置选项(option-评论验证码) 4、新增:相关文章 5、文章、相册内容页增加文章发布日期显示 v1.3.3 1、Gutenberg默认段落增加首缩进功能...此显示风格使用img标签直接显示,图片不会被裁剪,小图片不会被强制放大,大图片会被强制缩小。

    8.6K10

    我是这样写文字轮播的

    连续加班加点大半个月,做的活动项目终于算是告一段落了,而今天也将是考验其真正价值的时候,现在将这次开发中遇到的问题做一下总结。...功能点: 文字无缝轮播(不要在意为什么在移动端还会有这样的需求) 3如何实现 我们可以下面三种方法来进行实现: 1 marquee 当一说到文字无缝滚动时,大家最先想到的是marquee。...3 css3 + 少量js 再就是现在用到的css3 + 少量js,采用很少的代码就可以实现文字不同长度,文字条数不定的文字无缝滚动轮播。...4实现过程 下面先看html结构: 与图片的无缝滚动一样,也需要将第一条数据拷贝一份放在最后面 其次是css的相关数据: 由于IOS的一些渲染机制,最好滚动的元素内部都需要启动硬件加速,否则会有卡顿和文字显示不全的问题...最后要说明为什么要用js动态添加css3的类名实现滚动效果,一开始的时候我也是想直接将css3滚动特效写在滚动的元素上,但是在iPhone上发现首次加载当前页面的时候他不会自动滚动

    1.8K20

    JavaScript基础学习--02属性操作

    word-wrap: break-word;     为了省空间,无需考虑任何问题,强制断句,用word-break: break-all; 11、white-space: nowrap; 处理元素内的空白,只在一内显示...ellipsis; 14 -moz-text-overflow: ellipsis; 15 white-space: nowrap; /*规定段落中的文本不进行换行...,一直显示在最底部:      document.getElementById("滚动条所在层的id").scrollTop=document.getElementById("滚动条所在层的id").scrollHeight...首先input(submit)和button,考虑到浏览器的通用性首选input,但是考虑到表现力(button中value和显示文字可以不同)首选button。      ...,再“调”执行ajax(此时中断其他正在执行的代码《如果有正在执行的代码的话》),最后再执行剩余代码。

    1.8K90

    java常识-java怎么换行「建议收藏」

    后来人们对其进行了改进,加入了”字车”,每次打完一都要重新拨动上面的”字车”,代表,要对下一首位进行书写,此时打字机自动回到首,并且滚动下面的卷纸滚轮换到下一,模拟两个字符输出进行占位 后来研发计算机键盘的时候...软回车是用 Shift + Enter 产生的,它换行,但是并不换段,即前后两段文字在 Word 中属于同一“段”。...在应用格式时有用 软回车能使前后两的行间距大幅度缩小,因为它不是段落标记,要和法定的段落标记——硬回车区别出来。硬回车的html代码是 … ,段落的内容就夹在里面,而软回车的代码很精悍: 。...网页的文字如果复制到word中,则硬回车变为弯曲的箭头,软回车变为向下的箭头。...换行符会随着系统的不同而不同 windows下的文本文件换行符:\r\n Mac linux/unix下的文本文件换行符\n 因此常见的现象是,Unix/Mac系统下的文件在Windows里打开的话,所有文字会变成一

    3.7K20

    前端之HTML和CSS

    段落文字中有特殊标志或样式的文字  3、图片标签,在网页中插入图片,具有内联元素基本特性,但是它支持宽高设置。... 其他常用功能标签 1、换行标签 这是一文字,这是一文字  2、html注释:   html文档代码中可以插入注释...line-height 设置文字高,如:line-height:24px; 表示文字高度加上文字上下的间距是24px,也就是每一占有的高度是24px text-decoration...内容不会被修剪,会呈现在元素框之外。 2、hidden 内容会被修剪,并且其余内容是不可见的。 3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。...4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

    4.3K30

    6-css样式

    middle元素对象基于基线垂直对齐 bottom对象的底端与所在行的文字底部对齐 text-bottom对象的底端与所在行文字的底端对齐 文本缩进text-indent text-indent:2em...通常用在段落开始位置的首缩进 字母之间的间距letter-spacing 单词之间间距:word-spacing 文本的大小写text-transform capitalize文本中的每个单词以大写字母开头...可见性visibility visibility:hidden visible元素可见 hidden元素不可见 collapse当在表格元素中使用时,此值可删除一或一列,不会影响表格的布局 溢出隐藏overflow...设置当对象的内容超过其指定高度及宽度时如何显示内容 visible默认值,内容不会被修剪,会呈现在元素框之外 hidden内容会被修剪,并且其余内容是不可见的 scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容...auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

    1.9K20

    twikoo仿段落评论,实现快速评论功能

    我想了一下,下载了个番茄小说发现,他们都是按照每一的内容分别进行评论的,Hexo可以实现类似于每一段落一个Url,也就是#[段落名]的格式,但是Twikoo并不能将这些段落分开,而且本来评论就很少了,...问题提出番茄小说Hexo段落链接说说卡片回复卡片回复效果 内容简述 实现亮暗模式适配 实现高分辨率适配,设置上下阈值,基本确保不会超出屏幕 动画效果适配 自动将节选段落放置在评论框中 解决文本中含有回车导致函数失效的问题...经过设计,我决定将按钮添加在右键菜单中,并且是文章页,且需要选中文字右键才有效果(因为你不选中文字回复什么段落),我们先添加按钮,如果没有进行魔改右键菜单的请按照别人的教程进行魔改) 以上均可以实现右键菜单的魔改...').attr('style', 'display: flex'); return false; } }; 此时就可以基本测试出我们的逻辑是否正常了,hexo三联,在文章页选中文字右键才能看见我们的回复段落功能按钮出现...妥协方案 下面我们需要实现该功能,刚开始我选择的时使用和说说页面类似的效果,当点击评论后,找到评论区输入框,将选中文字放到输入框中,进行类似于回复段落的效果,但是由于我设置的懒加载,当评论区没有滚入到页面视野内时不会自动加载

    11220

    从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等

    -- 注释 --> 换行标签: 或 水平线标签: 或 2、双标签 段落标签: 特点:上下自动生成空白。br 换行不会生成空白。...--> 图片标签: src : 图片的来源(必写属性) alt : 替换文本 ,图片不显示的时候显示的文字...(重要性:1.SEO优化 2.盲人阅读需求) title : 提示文本,鼠标放到图片上显示的文字 width : 图片宽度 height : 图片高度 PS:图片没有定义宽高的时候,图片按照百分之百比例显示...---- 二、超链接 填写内容 href :去往的路径、跳转的页面, 必写属性 title : 提示文本,鼠标放到链接上显示的文字...​ alternate:在两端之间来回滚动 ​ scroll:由一端滚动到另一端,会重复 ​ slide:由一端滚动到另一端,不会重复 direction:设置滚动的方向 ​ left |

    2.5K20

    微信图片翻译技术优化之路

    2.2 图片段落框检测 目前 OCR 的结果是在行粒度进行文字检测和识别: 如果直接利用粒度的识别结果做下游的翻译任务,出现的问题是:单个的文本信息不完整,导致翻译结果信息缺失、难以理解。...文本行基于单行数据,不需要考虑的图像属性,比如字体风格,的高度等。但是对于段落框,不同风格的段落往往属于不同的段落(如标题和正文)。...与正常图文合成不同,这里第一步需要擦除原图文字内容、保留原图的背景,之后将翻译文字原图位置,而且文字清晰可阅读。...第二基于文字 mask 的结果,生成式的 Image Inpainting 方法重构的区域依旧存在原文字轮廓模糊噪音、不够平滑。...进行 inpaint 6.高斯模糊优化7.聚类获取主背景色&占比8.如果是单一背景色,则修复为主背景颜色 翻译文字原图 9.获取段落文字颜色10.根据重构图聚类获取段落主背景色11.根据原图聚类获得跟背景色差异最大的颜色作为段落文字颜色

    2.4K20
    领券