大屏幕排版之三栏显示

词典装饰排版交流分享
1

灵感来源：ODE 一页三栏

保证了每行就算有剩余浪费顶多1/3的空间 => 文字填满率高，少翻页，一眼丁真 :laughing:

应用：

  1. 手机屏幕小 => 默认一栏
  2. 电脑、平板、投影仪屏幕大 => 默认进行两栏或三栏显示，减少鼠标滑动。

image
image2883×1080 219 KB

image
image1213×1314 96 KB

可以看到空间挤压到1/3，展示的内容竟然相差无几，空间利用率完胜！

若是三栏同时显示，则一个词条右侧可以有两种方式

  1. 一眼看到三栏，第一栏放美语的 MW RH AHD；第二栏放英语的 ODE OED CED；第三栏放百科、专业词典 WIKI BUSINESS等，每一栏相当于原先的一个页面。
  2. 或者依然一栏显示从上到下一个个词典，但对每个词典内部来说，三栏显示其内容，内容与上面纸书案例相同，通过翻页查看下一页。

Update:

  1. Sunny 实现的三栏 + 内外可滑动窗口的叠加 + 固定/flow的各种组合混合，更强大。

Update：

应用场景的设想:

  1. ODE_BrE & ODE_AmE 的对比阅读。可以方便看到英美的释文的区别高亮对比，以及例句互补充。
  2. 文字版 & 图片版 的对比阅读。

这样的话，软件不用变，平台需要平板或电脑的大屏，一个MDX词典内包含两个词典的左右对比。

1 个赞
2

被骗了，一点都不省空间 :goutou:

词典长度不一，中间空了很多……

换了一种方式，还是有点勉强，不好玩 :smile:

2 个赞
3

这种瀑布流，很好玩呀。只是并没有提高查词阅读的效率。
可楼主的想法却是单个词典的三栏显示，要实现起来更麻烦，因为有一个页高的问题不好解决。
到底什么情况下分栏？是指定页高？还是自适应窗口高度？还是超过多少行？
如果按楼主的想法，按页宽来分栏，超长页面会出现一种情况，你从上往下没看完，又要向上翻，再从上往下看。

4

大屏幕上的空白区域确实是个痛点。前面只是简单验证一下，就勾出许多细节问题。

我是来凑热闹的，不是泼冷水:smile:。 希望op继续挖掘这方面的潜能

5

很炫酷啊，怎么实现的 :nerd_face:

1 个赞
6

把弹性布局样式写进GD配置文件夹里的article-style.css

应该不大可能去改每一个词典来实现这个功能。op的要求似乎超出了词典的装饰和排版范围，更像是给词典软件的功能建议

7

在哪一行加的什么css代码，可以分享下吗（感兴趣的就可以自己加上试试了） :nerd_face:

8

就和写一般的css一样，调试方法也一样，都是右键审查元素。要是配置文件夹找不到 article-style.css，就新建一个


@media (min-width:42rem) {
    body {
        display: flex;
        max-height: 120rem;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: flex-start;
        align-self: flex-start;
        align-content: start;
    }

    .gdarticle {
        width: 33%;
        margin-right: .5em;
        margin-bottom: 1em;
        box-shadow: 0 1px 3px gray;
        overflow: auto;
    }
}

css高手应该会有更多的玩法。

我做的比较简单，但也大概能感受到这种排版的特点。每次查词的时候词典内容是动态变化的，词典高度也是动态变化的，这会使词典的相对位置不固定（有可能会在栏与栏间左右横跳）。确定性变少了，会影响阅读习惯。

3 个赞
9

尴尬了:sweat_smile:，我这个不算解决方案吧，只是三栏排版的临时测试方法。可能要提交到词典平台的开发者那里才能得到真正的解决方法？？？

10

分两栏应该就差不多了，短的词典放右边

11

（已被删除）