MDX 排版心得

henices

8 L1 W8 o3 M. e/ L' b# Q
陆陆续续地重排了一系列词典，一些心得和大家交流一下。

说起排版这个活，有些同学不太看重，和制作mdx 相比，似乎门槛低些。其实排版正是入门易，精通难的典型代表。
1 f: b' o' M6 g2 O8 C7 W+ zA大说为了排牛津8，大致排了一年多才排出了一个比较满意的版本，Hugh牛也说排最长的花费了一年半的时间，
1 ~! I/ K3 v; c. V/ S0 RB大则说排版一如既往地花费了许多心思，由此可见要做好不容易，是个大活。
4 d) d( ~4 |3 P6 ^5 e' j) ~
论坛里说排版的文章不多，@wa1314159 常委写过一篇 《CSS美化词典教程》，非常不错，没有看过的可以去看看。
https://www.pdawiki.com/forum/thread-17781-1-1.html

wa1314159常委的文章点出了排版的三大穴位，字体，行间距，配色。其实mdx 排版过程中这些都要反复调整，直到
一个比较协调的状态。
4 f* L/ v4 e& `% r6 Q4 i6 |+ u" g
1 }! L' u0 M3 ^$ b5 h( t$ [字体将直接影响显示效果，有的系统字体渲染效果不好，字体就更加关键了，字体发虚基本上就废了。关于字体的选择
% l8 D! t! b5 U$ M# ^/ p( A大家参考上面几位大大的css即可，不理解关系也不大，可以先抄袭一下 ：） 有兴趣的可以看看下面这篇：

https://segmentfault.com/a/1190000006110417

! J- i6 K0 }! x行间距这个问题就众口难调了，有人是紧凑控，有人是宽松控，可以按照自己的口味适当调整。（关键字 line-height）
" i  X8 Q' D- n* O# N* G个人还是比较喜欢紧凑风格，因为基本大家的词典都不少，又有在手机上查词典的习惯，自然紧凑的适用范围广些。

最难的可能就是配色了，配不好就是花花绿绿，要不就是死气沉沉，我建议还是先模仿再创新，经典配色都是反复实验
得来，节省时间，效果好，专业的UI/UE 除外，你们是专业的。个人在这块也是不行，完全没有想象力。

; b3 I/ G4 O5 ^. w( R' V8 t8 wCSS3 色彩名字: http://www.cssportal.com/css3-color-names/
  ~: S0 T& I0 B5 W- y$ G
最后还有一个对齐的问题，这个问题其实相对好些。可以简单粗暴地先来一段  * {margin:0;padding:0}
, Q  b1 b, O% Z3 c3 g3 v4 m) V
( S7 H# i3 y  x' j& D- m% `上面说了很多，但是没有说心法总纲。那就是内容为王，不能拘泥于形式，也就是内容大于形式，因为词典是要用来读
的，排版是为了辅助阅读。

所以好的排版应该有下面几个特点，重点突出，结构清晰，简单明了。
  ^# d$ i( ^* q+ J2 j
5 I, D4 s) A( Q$ E. e9 X% A0 t# @& r$ A其实我自己的排版也是不行，改进空间巨大。写这篇也不是好为人师，论坛上比我合适写这篇的人多了去了，写这篇一是
为了做个总结，二是希望能给大家一些参考，毕竟这是一个前端外行写的速成手册。
0 i9 l) E$ I1 b1 F
0 h% g* @7 ?* C最后补充一点，如何看大大们的css怎么写的呢？ GoldenDict 右键，Inspect
) B+ z& v2 O; {, M/ b4 S
关于作品风格：https://www.pdawiki.com/forum/thread-19248-1-1.html
2 m2 |/ B7 h. x, ?7 g' ~
: p" Q* U6 `/ I7 ]% F
+ N6 K3 p4 P; x; n
4 t* h# h3 ]- e/ q: s+ L

BLKSerene

* {margin:0;padding:0} Mdict 上会把软件本身默认的样式给复写掉 其他软件也可能有这个问题
body, h1, h2, h3, h4, h5, h6, p, dl, dd, dt, ul, ol, li {
- l! O# \8 c" }$ U6 n5 |, s9 l, H# b, V$ v    margin: 0
0 }, m  z- `1 P' s: N+ v8 {    padding: 0
% }4 o7 g/ B# @: k} 会好一点 不过还可能有点问题。。
就是词典软件内每个不同词典的标题和词典本身内容之间的边距也没了 所以和正常写网页 CSS 还有点区别
而且还不知道各个软件用过的什么浏览器内核 所以处理兼容性比前端还麻烦。。

oversky

最后补充一点，如何看大大们的css怎么写的呢？ GoldenDict 右键，Inspect

, t8 v+ D0 A$ j: a/ H8 L3 i
. |8 Z/ H0 B. f  Z8 N; d1 M先把要改的地方高亮起来再 inspect 比较容易看。

dfliaoyue

颜色名推荐一个网站，按照颜色类型分开给的名称，比lz里的那个要直观些(而且排版好看)：
1 t2 R! s' X' }! O4 b  V5 Z; e. Rhttps://htmlcolorcodes.com/color-names/

2 V! r2 V- Q7 E8 Q9 q字体，英文字体我现在比较喜欢Open Sans，衬线的话Merriweather和FreeSerif都不错的。字体兼容问题主要还是针对windows(说白了，goldendict)吧，其他平台的默认sans-serif和serif就挺漂亮的了。内置字体的话，如果要用斜体最好把italic给放进去。不过可能导致goldendict崩溃。
( v% C, p* g7 J# X/ m/ g$ }中文字体，可以去方正、汉仪网站上去淘（个人倾向汉仪，因为方正的GBK要5块钱）。中文字体相比英文字体体积要庞大，内置需谨慎。
5 v+ s) E0 c, k0 G; d兼顾美观和兼容性的写法，比如说：font-family: HYZhongHeiS, Open Sans, sans-serif，这样的话非win平台用自己的字体，windows只要装了这个字体就可以用了，还是比较方便。

houbible

感谢分享排版心得。

spearonsquare

上面说了很多，但是没有说心法总纲。那就是内容为王，不能拘泥于形式，也就是内容大于形式，因为词典是要用来读
的，排版是为了辅助阅读。
0 u9 J& R- P# u. I
说得很好。我没有用手机版，所以对色彩鲜艳的词典几乎不用。
因为我觉得，色彩鲜艳的词典，用时间长了，眼睛会很累。
一家之言，可能不对。

henices

blkserene 发表于 2017-4-16 00:04
* {margin:0;padding:0} Mdict 上会把软件本身默认的样式给复写掉 其他软件也可能有这个问题
body, h1, h2 ...

5 |& g# i0 a0 p" r& P& F这个是对的，这么写更加安全。

kyletruman

spearonsquare 发表于 2017-4-16 13:35
+ `% D$ y" e9 f0 u, b0 Y$ n上面说了很多，但是没有说心法总纲。那就是内容为王，不能拘泥于形式，也就是内容大于形式，因为词典是要用 ...

% P/ l* |% ?5 f; ?6 k8 D
+ S9 a6 s- ]" k/ q: d色彩不宜过于鲜艳，但也不应过于平淡。色彩、字体大小和行距主要是为了突出内容。还有排序的序号尽量淡化，否则内容和形式主次不清(排序应该尽量少用带有圆圈的序号，序号不要弄成彩色，不然喧宾夺主，形式高于内容，降低查阅的阅读速度，耗费更多时间)

galvinzhang

感谢分享排版心得。一直对你的排版比较推崇。感觉颜色搭配比较自然，原来有这么深厚的理论功底啊。

西红柿

排版实在痛苦，选择困难症，我选择直接抄官网

必过_ybPZ2

词典网站的排版就是最好的例子，可以直接拿来用。

aipie0066

学一下，这个有时间再尝试一下

风葶云

排版不简单，精美更困难

kuangren100

感谢楼主的热心分享。

wszf5560

谢谢楼主点播。自己平时也排版一些常用词典，经常整的自己像个编词典的一样。相当不容易，崇拜这里的任何一个大佬。