建议大伙制作词典时注意一下排版

bt4baidu · 发表于 2014-6-15 14:52:01

1、较差的排版

  <b>1.</b> the sound made by something moving rapidly or by steam coming out of a small aperture<BR>
   <font color=blue> ••</font> <font color=DarkGreen>Syn</font>: <a href="entry://whistling">whistling</a><BR>

复制代码

2、较好的排版

<div style="padding-left:0.5em;"><b>1.</b> the sound made by something moving rapidly or by steam coming out of a small aperture<br></div>
<div style="padding-left:1em;"><font color=blue>••</font> <font color=DarkGreen>Syn</font>: <a href="entry://whistling">whistling</a><br></div>

复制代码

这两种方式有何不同？PC上可能不容易看出来，到手机上区别就很明显了，见下图：
较差的排版，句子较长出现换行时犬牙交错、参差不齐

较好的排版，即使出现换行也比较整齐

下了好几个词典都是用&n bsp;做缩进，PC上看还好，放到手机上排版全乱了

另外有些缩进太多，一个句子开头居然有连用七八个&n bsp;的，这种在手机上简直没法看

建议别把缩进设得太大，能看出层次就行了，缩进太多浪费手机屏幕

eeejj · 发表于 2014-6-15 14:57:50

支持！

hyln9 · 发表于 2014-6-16 17:48:41

好吧，我承认错误

Hugh · 发表于 2014-6-17 20:17:41

本帖最后由 Hugh 于 2014-6-17 20:23 编辑

楼主这个还不够好，“float”可以免交错。如下

但是为了省事，我只会整体缩进例句

更多词典参考匿名/yingyu大侠代码。

bt4baidu · 发表于 2014-6-17 21:09:24

Hugh 发表于 2014-6-17 20:17
楼主这个还不够好，“float”可以免交错。如下

居然惊动了排版大神

Huge大神制作的词典自然没这个问题，那个SOED6的排版堪称经典，用着很爽，表示感谢

goldendict的artical-style.css可否共享一下？看着眼馋，
想搞成这样始终搞不出来，css排版本人始终学不会，还是没有艺术细胞

mitkyg · 发表于 2014-6-17 21:23:13

Hugh制作的词典的排版真是赏心悦目

Hugh · 发表于 2014-6-17 23:12:26

本帖最后由 Hugh 于 2014-6-17 23:16 编辑

bt4baidu 发表于 2014-6-17 21:09
居然惊动了排版大神

Huge大神制作的词典自然没这个问题，那个SOED6的排版堪称经典，用着很爽 ...

1. 大神Huge--->普通词典使用者Hugh
2. 实现中文雅黑+英文Tahoma：附件中的注册表文件双击；再使用GD的配置文件；
3. Goldendict-首选项-界面-显示风格：灵格斯

JAMES_ROWAN · 发表于 2014-6-17 23:54:55

弱弱的问一下，artical-style.css放在那个目录？

Hugh · 发表于 2014-6-18 00:14:06

JAMES_ROWAN 发表于 2014-6-17 23:54
弱弱的问一下，artical-style.css放在那个目录？

我是采取的portable的策略：
1. 在GD目录下新建portable文件夹，artical-style.css放进去
2. 将自己的词库目录新建个快捷方式，剪到GD的content文件夹下

mitkyg · 发表于 2014-6-19 18:56:18

Hugh 发表于 2014-6-17 23:12
1. 大神Huge--->普通词典使用者Hugh
2. 实现中文雅黑+英文Tahoma：附件中的注册表文件双击；再使用GD的 ...

感谢Hugh分享, 辛苦

bolome1 · 发表于 2014-7-21 23:27:04

感谢，调整了GD的css要舒服多了

ryuya · 发表于 2014-7-27 19:08:06

Hugh 发表于 2014-6-17 20:17
楼主这个还不够好，“float”可以免交错。如下

有個比 float 更好用的 display:table-cell;

唯一缺點就是 IE9 後才支援
所以IE內核的 MDict(PC) 可能用了沒效果

不過 GoldenDict, BlueDict, MDict (Android) 都沒問題

ryuya · 发表于 2014-7-28 00:14:55

看似複雜，其實只用到 padding-left 和 display:table-cell
table tr td 都不需要

引用一下
http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html

那么table-cell是不是具备这个特点呢？答案是yes，为什么呢？css中有一个有意思的规则“创建匿名表格元素”。拿table-cell来扯，就是，当某个元素被设置为display:table-cell的时候，如果她的父节点不是display：table-row，爷爷节点不是display:table，那么下面就是见证奇迹的时候，这个儿子生出了他的爸爸和爷爷（浏览器会自动创建者两个匿名盒对象）虽然你找不到你的father 和 grandfather，但这确实发生了，这真的是不可思议的事情，哪里不可思议，没有掌声最不可思议。^_^

bt4baidu · 发表于 2014-7-28 13:48:53

ryuya 发表于 2014-7-28 00:14
看似複雜，其實只用到 padding-left 和 display:table-cell
table tr td 都不需要

这个好！省掉不少工夫，今后做词典可以参考使用
以前用table-tr-td排版真叫痛苦

mdict可以导入注册表，升级内核到IE9，见此帖

yingyuxx · 发表于 2014-7-28 16:11:28

词典更有层次感了，但随之而来的问题是：左边空白过大。

knetxp · 发表于 2014-7-28 18:02:18

排版效果直接影响可读性和使用效率
不如这样：
成立词典制作组，词典美工组，词典修补组
让不同的高手分工负责不同的工作
专门打造几部绝世好词典

bt4baidu · 发表于 2014-7-28 21:10:18

knetxp 发表于 2014-7-28 18:02
排版效果直接影响可读性和使用效率
不如这样：
成立词典制作组，词典美工组，词典修补组

事情不是这么简单的。

数据组织、文本结构设计和排版是紧密结合的

已经制作出来的词典，再美化的工作量是非常大的，因为其HTML文本不是统一结构的，如果文本结构复杂，简直是无法逐词条修补的。

除非有个数据结构标准，大家全按标准做，这样才能流水作业。

但是组织这样的工程也非常花精力。。。

yingyuxx · 发表于 2014-7-28 21:57:23

yingyuxx 发表于 2014-7-28 16:11
词典更有层次感了，但随之而来的问题是：左边空白过大。

举个例子来说，这是SOED6中take的52个义项，左边空白不得不大些，倘若再把a,b,c及a, b, c下的（1），（2）等突出，恐怕留白更大。

bt4baidu · 发表于 2014-7-29 19:40:42

yingyuxx 发表于 2014-7-28 21:57
举个例子来说，这是SOED6中take的52个义项，左边空白不得不大些，倘若再把a,b,c及a, b, c下的（1），（ ...

一般可以第一级单独一行，左边不留白
第二级左边不留白
第三级左边留白 = 两位数字的宽度
第四级左边留白 = 一位/两位字母的宽度
足以应付绝大多数情况了

即使再搞个第五级出来左边留白也不会太大

级数不能太多，否则看起来同样费劲，四级缩进基本上是人类精神承受力的极限了

yingyuxx · 发表于 2014-7-29 21:24:18

bluedict 两边本来都留了白的。修改不是不可以，但放到mdict上又会出现新问题。

bt4baidu · 发表于 2014-11-24 19:24:11

使用绝对定位也可以达到排版效果：

注意position: absolute;left: 0.3em;

<style>
div.c {margin-left: 1.2em;}
span.o {display: inline-block;padding-top: 2px;position: absolute;left: 0.3em;width: 1.5em;text-align: center;}
span.t {font-family: 'Lucida Grande','Lucida Sans Unicode';}
</style>
<div class="c">
<span class="o">1</span><span class="t">cause to overturn from an upright or normal position</span>
</div>
<div class="c">
<span class="o">2</span><span class="t">turn upside down, or throw so as to reverse</span>
</div>

复制代码

Langheping · 发表于 2015-11-6 16:54:22

I should have read this post first before I published my dict.

[讨论] 建议大伙制作词典时注意一下排版

点评

点评

点评