图片词典致命伤一屏无法显示多页！用“瀑布流”解决了！

starmars

今天做了一个简单图片体验版的MDX，实现了点击页面左（右）半边任意处追加（而不是跳转！）显示前（后）页，页面追加不影响其他同时打开的词典的已有显示。这是电子商务网站常见的“瀑布流”效果本词典不象市面上已有的其他图片版词典，只要点击“下一页”，其它同时打开的词典的查询结果就都没有了，只显示这个“下一页”的内容。我这个版本，点击一下页面任意处，下（上）一页内容就“追加”显示出来了，其它词典的查询内容都还在，上下滑动仍可浏览。
+ O! `- ]! n* g  g& }/ ]& H" z: o本词典也不象其他图片版词典一样在页面顶部尾部显示“上一页”“下一页”甚至是相邻很多页面的链接：显然，瞄准这些链接去点击远不如在页面左（右）半边任意处点击舒服。且一般来说需要参看超过相邻两三页的时候并不多，如果非要跳转到好几页之后（前），多点几下（追加出来的）页面好了。真想频繁在页面间跳转还不如去看有书签的PDF。而词典这种无篇章结构的书籍，本来就无频繁跳转的需求，书签没有什么意义。
% D  a- X; k: D8 O  E# k因为可以极大提高制作速度且大多数情况下够用，本人一直大力倡导的是虚拟词表，即不去OCR词典每个页面来真正识别出每个词条。所以其他图片词典常见的设计：在页面上显示出本页的所有词头的工作也没有做，因为虚拟词表上的词头有可能根本不在该页面上。更因为我一向认为，页面已经显示出来了词不都在上面看不到吗？还有什么必要画蛇添足再显示一遍这些词浪费屏幕面积？非要显示的话请在当前页面图片显示前后页的词头供预览可以吗？肯定有人会和我一样不习惯在页面上下显示一些多余的东西。本体验版仅有词典前15页，词头仅为：abate,abhor,abide,abort,above,abrupt,absent,absurd,abut,accept,acclaim,accord,account,accuse,absorb,0008
兼容性测试：
（1）Windows版 欧路 —— 通过！
6 S- n! F1 h7 @) g+ S. l& `  r# g  A/ L( s（2）Windows版 GoldenDict —— 通过！
1 y4 _( d* a0 j' M: z! x! J4 A5 |（3）Windows版 MDICT  (1.3 RC4) —— 完全不兼容！ 启动时报告脚本错误，瀑布流效果与缩放平移重复显示图片等所有其他高级功能均无法使用。
3 D2 @& b- K! L& \（4）Windows版 MDICT  (2.0.12) —— 部分兼容！ 瀑布流效果正常，但缩放平移重复显示图片等所有其他高级功能的设置无法记忆，查下一词时上次设置将遗忘。无法通过设置将电脑版扫描MDX当手机版用。
（5）Android版 欧路 ——部分兼容！ 默认设置使用时会黑屏，做如下设置后可正常使用瀑布流功能："软件设置-解释设置-解释界面单击单词"这一项关闭。缩放平移重复显示图片等高级功能的菜单显示和设置使用都不正常。
（6）Android版 深蓝 —— 通过！ 默认设置使用时会跳出其他App打开图片，做如下设置后所有功能可正常使用："软件设置-调整图片适应窗口" 这一项不要勾选，出现"不调整图片大小"字样时是正确设置。
（7）Android版 MDICT —— 通过！ 默认设置使用时会黑屏，做如下设置后可正常使用瀑布流功能："设置-控制-使用点击手势(取词)" 这一项关闭。Android版MDICT不是很稳定，有时使用图片缩放等高级功能会不正常，此时需将："设置-显示-调整图片以适应窗口大小" 这一项关闭。
  x# Z9 c( [  y$ C9 e还有很多不是最重要的琐碎工作可以做来加强功能。以下两个我认为是最有意义的：（注：经过努力以下功能全部实现，即将发布！）
7 V* t0 i; z) w3 x! |0 A
7 b& E% S9 W" L6 F+ I+ y. \（1）如果在电脑版词典软件中同时打开多个图片版词典的话，因为不同词典页面分辨率是不同的，如果词典软件窗口宽度调整得对某部图片词典正合适，那么可能对另一部词典宽度就不合适了，不是太大就是太小。如果给词典加一个图片大小缩放控制按钮就好了。可以将将词典软件窗口宽度调整到页面最小的图片词典也能默认显示正合适，然后将那些本来就很大的图片的词典中的页面点击控制按钮临时缩小过大的页面以扩大视野。记忆住页面放大系数，无需每查一次词都去设置 —— 这一实用功能最具革命性的意义在于终结了所谓“手机版“图片词典的存在必要！
( g/ U2 d; ]+ g& g0 C) h电脑版的图片版MDX每一个页面对应纸版词典的一整页，如果直接在手机上使用的话，因为手机屏幕太窄，你必须放大页面才看得清。手机上常用的词典软件只有深蓝和欧路两种。深蓝自己根本就没有将图片放大的功能，你只能忍受蝇头小字了；欧路中则可以用手机上标准的用两个指头向外划拨的手势来放大图片，但弊端也出现了：所有其他打开的词典不管是图片版还是文字版也被同时放大了，ZOOM OUT到屏幕以外了。人家欧路编程的时候就限制了所有打开的词典要放大缩小只能统一行动，不能分而治之每部词典有自己独立的缩放系数。这样的话等看完这部图片版的解释要看其他打开词典的解释你还得还原到原来大小。再退一步说，我就只同时打开这一部图片词典好吗？很遗憾，它无法记忆我放大的状态，等查下一个词又还原到默认大小的蝇头小字了。每查一次都要设置，不厌其烦啊。
这样，才有了手机版之说。手机版其实就是将纸版词典一页在中间裁切成左右两个半页两个图片文件，显示的时候不是两页左右并排显示而是一上一下显示，无论在电脑里还是手机里，都是通过滚动将上下两个分页看完。由于半个页面宽度比整个页面窄了一半，在手机上看即使不放大页面字也大了不少可以接受直接用了。但是，制作手机版需要裁切页面，的确有自动的软件可以干这事儿，但总是不完美的，总有裁切过头或者裁切不够的现象发生，一本词典动不动一两千多页，需要人工一页页检查自动裁切的效果，有问题需要重新设置裁切参数返工，返工之后的又需再人工检查，还会有第二次第三次甚至第N次返工。如果不想返工，那你可以一页页手工裁。如果您是象我这样的一个负责的完美主义制作者，做一次就知道工作量有多大有多痛苦了!
9 \* ~4 k1 v' ]4 t3 }' Y9 j2 S
+ @5 j6 C- _3 A" ]+ ]' V而现在，我直接拿电脑版在手机上用好了。前面说过深蓝自己本无法放大页面，但我的JS脚本加了这个放大功能就可以了哦！我放大到手机屏宽度正好和半页宽度相同的时候就算设置完毕了，这个设置是可以永久记忆的，查下一个词它会自动按我上次的设置来放大而无需再次操作了！如果是手机版词典我需要上下滚动看完一整页，现在是电脑版词典我只需要左右滚动一样也能看完一整页了！
) x" y" Q  P$ I; t& d
- f* i5 K9 ]3 s& U进一步思索，还有一种完全模拟手机版的方法：每一整页都连续显示两遍，第一次显示只显示左半部分，接下来再显示右半部分。这种效果都可以用图片的缩放和位移来实现。
8 n! y2 T/ ~7 v% S! y
- u0 ?. |9 @# F. R& i; ]# o$ n2 h专门裁切页面做了手机版的词典软件其实是相当少的，而现在电脑版都能来当手机版用了，这多好啊！基本上手机版已经没必要存在了。
% H; p! F* k3 s: N9 }
  |% O8 X' a$ l9 X（2）有些图片词典页面没有经过切边处理，左右空白太大浪费了屏幕，手机屏上尤其不能忍受。如果给词典加一个切边的设置就好了，要做成奇偶页可有不同的切边设置。这个切边可能没有高级到自动识别空白而只是简单切掉指定的像素而已，可能会出现对少数页面切得不够或者切过头的现象，但有总比没有强。加一个临时的切边设置调整或者复原按钮，如果个别页面切过头了，针对该页重新设置或者干脆不切拉倒。这页看完了再查其他词显示其他页面时还按照默认的切割设置来切。

—— 以上两个功能基于一个关键技术点：所有设置可以在词典软件中所见即所得地设置，无需去改配置文件如CSS/JS等。而且一旦设置好就可以记住，查下一个词能永久记忆而无需每查一个词都去设置。这是当前所有词典MDX十几年来没有突破的瓶颈：想想那些默认隐藏中文的英汉双解词典，是不是点击一个按钮能显示出中文了？但是一旦再查下一个词，刚才的设置就忘记了，又回到默认隐藏中文的状态，每次查词都要点击才能出中文，真是不厌其烦啊，除非去修改CSS或JS等配置文件。现在好了，这个问题已经解决！使用者无需掌握这些JS CSS技术，无需修改配置文件，一旦设置永久记忆，无需重启词典软件立即生效了！甚至非图片的普通文本词典也可以在词典软件中设置并记忆住中英文显示隐藏，字体，大小，颜色等所见即所得的设置，成千上万种搭配完全交给使用者自己，停止CSS/JS作者无休止的版本更新了吧。



/ O/ f1 H8 `! X/ G- U( B( t请回复下载：外研社高级英汉词典图片实验版-仅前15页
; E5 j- d- D3 j! G9 \* l- j链接：https://pan.baidu.com/s/1XBCf0sCb0Gnp_JkYr5NcmA
; W6 V4 l6 `: F提取码：0z2n
* Z6 y- H0 l6 S, M. ~6 O
' r8 Y3 e' c# z. r9 i6 n+ `/ _( _
  C# K" `+ x+ S; i/ d' e# s; \0 A% m* o

1 K+ S& G9 T9 ^! f( _- b对于图片词典，我看到坛子里有很多讨论，对于大家精益求精的精神我好佩服的。但实在不明白为什么很多朋友要去舍本逐末地去追求一些无关痛痒的细节小问题而对重大问题视而不见？？！！

' X( v' L. c) X! n5 J7 H% ]强烈建议图片词典增加一个比任何其他花里胡哨的次要功能都更重要千倍万倍的功能：

如果一个词头解释跨两页显示，我需要这两页 同时 都显示在屏幕上一起看！！！！！！我需要在 一 屏上看到这个词条的完整解释！！！！！请 同时 显示词典的两个页面！！！！！


现在所有图片词典都做成：看完到了页末，必须点击下一页，结果下一页倒是显示出来了，但前面那页消失了！更糟糕的是，大多数人都不会只同时打开一部词典吧，肯定同时开了很多其他词典的，结果呢？你会发现下一页显示得孤孤单单啊，怎么下一页前面和后面本应该有的其他词典对该词条的解释统统消失了呢？哦，原来上一页中的下一页的链接对应的词头根本就不是一个单词，而是一个与页码相关的东西比如entry://1083（上一页是1082，下一页是1083） 啊！图片词典一个词头“1083”对应第1083页的图片，可惜其他词典没有这个叫1083的词头啊！等我查看完这孤零零的图片词典的下一页，如果还要继续查看该词头在其他词典中的解释，我只能在词典软件中点击回退按钮，而这一回退就又出现了问题：词典软件做得不完美它往往退不到之前显示图片词典上页的那个位置而是到了一个莫名其妙的位置！如果说这个问题不是总出现的可以原谅，那还有一个更大的问题：当点击后退时其实相当于在词典软件中重新查询这个词头然后再定位到刚才的位置，就是说这相当于重新来一遍啊！什么？我已经对这些词典软件渲染的速度够不满意了，现在查一个词你竟要我等查两个词的两倍的渲染时间吗？！当你在GoldenDict中同时打开二三十部词典，你试试渲染速度吧？我见过有帖子里的狂人同时打开上百部词典的，卡死你！不信你输入take这个词看看!
# t0 H* p# y' K  p8 j
0 i& K# b6 H3 ?  _请不要跟我说“一个词头解释跨两页很罕见！！！”。图片词典的最重要的功能是什么？其实就是能象看pdf书一样看到一整页，能查到很多相关词（主要是同根词）！谁都不能否认这对英语学习扩大词汇量有重大的帮助！这些相关词跨两页三页甚至更多页的情况都有，是非常常见的！那些将每个词条辛苦切图分离出来的朋友我不得不佩服你们的愚公移山的精神，但你们这样做不是适得其反吗？你们反而将图片词典最重要的功能给抹杀了!

* B, E. Y! f: K7 c坛子里几乎所有图片词典都是这种糟糕用户体验，要解决其实很容易！

* D& j9 e, a! q: N$ q3 Z: L( d: H不要将上一页/下一页做成类似entry://1083的词头链接吧，点击上下页的时候触发点击事件用JavaScript在DOM树上动态添加下一页或者上一页显示就可以了，这样的话，上一页已经其他同时打开词典的同一词条的解释统统还在那里绝对不会消失呢！
/ r+ S8 w2 A4 \. Q* t" E% Z0 U( x8 x7 a就这么简单为什么不去做呢？！你们不做，我来做好了！
+ a$ P0 o( c$ c7 H
% ^4 h  p' m. J







3 Z0 l' e$ f* U/ y


  }6 |" z) z7 ~; ]9 n! A% ]  v2 R

5 g) [2 C" b3 L
; F& l2 C; e9 ^9 Q: l

klwo2

多年前的《汉语大字典》图片版就是能显示跨页的呀，楼主哪儿来的【所有图片词典】？我前几天刚发的Taber's Cyclopedic Medical Dictionary（https://www.pdawiki.com/forum/thread-41255-1-1.html），也是能显示跨页的，只因为有朋友帮忙处理了一下。

( D6 F: \. Y# |& c, t$ a能不能显示跨页，纯粹是制作的时候想不想做而已。我觉得Goldendict是多标签的，完全可以用新标签打开下一页嘛，又不是多年前的IE
3 j) e9 n( x' }5 u. a
, G$ r) {$ _! v4 ~* f+ u+ |% H8 u图片版实际上是纸书的模拟，你买一本词典回家，里面有take，你能做到不动手不动脚，手脚都砍掉，一次性把take的所有内容看齐嘛，也做不到呀，手翻一次跟鼠标点一次，差别不大。
" m9 R, F9 Y+ W; ^
* z& c+ i8 b( P( Z( \4 `& |4 ~这个问题说大不大，说小不小，楼主天生喜欢发惊悚标题，宇宙爆炸人类灭绝型的，提的奇思妙想也不能说一点都没道理。只不过不同的人呢，确实有不同的想法，有人觉得做汉语字典要加上拼音索引，输入hao3直接跳到对应页码；有人觉得做按部首排列的汉语字典要加上部首索引，在【好】的页面能跳转到【女部】；还有人看见【好玩】这个词只能匹配到【好玩】那一页就浑身害臊，一定要把【好】字整个条目都显示出来才舒服（康熙字典就是这样的呀，甭管什么复音节词全部在字头底下）。
6 t& X  u' X6 x2 k! E5 o4 I: s
问题是，每多做这么一个功能，都要多花时间、精力，不是每个作者都喜欢加做功能的，好有些mdx作者就是喜欢短平快。即便是商务印书馆这样的纸书出版大鳄，你问问人家编辑，一本书多出100多页的附加内容，不要考虑成本的嘛，不要考虑市场的嘛。咱相比之下算灵活的了，不是嘛。

VimVim

starmars 发表于 2020-8-13 12:38
2 @/ H. E5 H2 c# X4 b“JS：”导航控件可很方便地动态添加想要添加的前后相关页面“，而不影响其他词典查询结果的显示。”—— ...

牛！期待发布！

喬治兄

/ d* P4 [* m# z4 y( ?) I

starmars 发表于 2020-8-13 05:14
问题1：”虚拟大词表“ 比较适合按字母/读音序排列词典，而图片词典的类型多种多样，这个程序如何适应更多 ...

可以考慮用這個
照著套用應該是 OK 的

  G; `2 C: f  lhttps://www.w3schools.com/howto/ ... tryhow_js_slideshow
, Y  f  p0 p, G
( c7 j4 O  G  l0 _  {

<!DOCTYPE html>
<html>
8 g$ u! A* D8 [<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
7 q; J" T; }- f<style>
* {box-sizing: border-box}
& \! {  w- {0 @* ]body {font-family: Verdana, sans-serif; margin:0}
5 i% ^( p& P/ x& |% h& i.mySlides {display: none}
img {vertical-align: middle;}
2 h1 d( O* S$ p0 P, T! E9 l6 M
/* Slideshow container */
, T+ j% m! U; J6 W( m.slideshow-container {
) J% w  C5 c5 P) J& C& u# `  max-width: 1000px;
7 E% K) C& M+ b8 \; H9 e% I0 h  position: relative;
/ v6 y- L. |* T8 u) \  margin: auto;
/ s) P. `6 S0 C9 {$ e5 V3 ^; o3 e}

/* Next & previous buttons */
: G. S/ g  u1 I9 M) L8 |.prev, .next {
  cursor: pointer;
; d: I& F/ }& m8 B  position: absolute;
9 R: c: Q( T) \. Q  top: 50%;
  width: auto;
  padding: 16px;
" L5 o( w* j- o& _  margin-top: -22px;
  color: white;
  font-weight: bold;
' ~& f5 ]" F8 p7 q0 L( S  font-size: 18px;
3 V5 }+ u- ^# A; U7 q$ w% F  transition: 0.6s ease;
& |& v+ b; @3 t) t- I, Q- |" V- g  border-radius: 0 3px 3px 0;
  l" _: u9 _7 F  user-select: none;
* W2 D) _: ]" D2 d2 T}

/* Position the "next button" to the right */
/ G5 C) _7 F# S8 Z.next {
  right: 0;
/ i+ t( I% u1 I8 C9 a  border-radius: 3px 0 0 3px;
! g: z  ^7 @( K" `/ W- o2 m}

8 C& B. B6 P! Y9 B& @# f, S/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
! t# k8 e: a" G- ~$ D0 {2 n5 |* W# c$ x.text {
$ h( p1 v. Q0 F8 X  N7 l  color: #f2f2f2;
( {) S4 O! J: Q8 x+ W  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  f3 X' Y4 d1 Q( a  bottom: 8px;
$ w5 r  ~" d' d+ o( }  width: 100%;
2 @$ e0 a  W) K9 h  text-align: center;
: f  o% V$ E# @: _}

/* Number text (1/3 etc) */
: ^: @/ ~; K* ~- X6 P.numbertext {
  color: #f2f2f2;
& N/ S4 P  b0 S& r1 d. L7 h  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
; t/ k6 [2 ?" o# B1 Q; H1 m  f+ ^  D  width: 15px;
- D( j+ {6 R  _3 Z! I; E. Q3 }  margin: 0 2px;
% D9 I6 O/ e: N  h8 q  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
4 m8 g# }1 H- y. y  transition: background-color 0.6s ease;
! _& p. a$ G- E/ G7 @# d4 k}

9 t9 z) J2 m# Y+ U' x.active, .dot:hover {
: ?$ l# {: {9 V8 t: y  background-color: #717171;
# v  m$ J7 `7 P; g, m' s( }}
! D$ s# `* Q  ]5 k
/* Fading animation */
# R4 X- V5 Y3 @1 |$ X9 }2 a. k.fade {
  -webkit-animation-name: fade;
" E. X1 |5 D1 @  -webkit-animation-duration: 1.5s;
: d) |4 b. I! K1 O( u  animation-name: fade;
4 f+ c0 |) [1 s4 K, Y+ Z  animation-duration: 1.5s;
}
6 ^% s$ E7 ?$ O/ a7 m$ c8 X
@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

- I. D6 ~3 m( `( K, {: h, m@keyframes fade {
  from {opacity: .4}
6 T) w7 O; \) e* E' \  to {opacity: 1}
: }8 A3 W0 F. [8 |& C8 n+ M6 I}

' q  Z& O1 N6 q/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
; \2 d1 e7 ]3 w8 {9 P7 C}
+ ?& n+ V9 R1 F6 _( F# K" h</style>
</head>
1 T; a0 V% z# B0 S' t<body>

<div class="slideshow-container">
. C- @  e+ l' g3 g& W  f
<div class="mySlides fade">
  v/ ~- V+ w( v  [$ O5 o, c  <div class="numbertext">1 / 3</div>
  <img src="img_nature_wide.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>
$ s& r0 E9 E% T& l- b* j9 J
2 g+ e( n1 U# u% ?/ r6 i<div class="mySlides fade">
5 V5 a! X/ c5 X1 Z$ t! |  <div class="numbertext">2 / 3</div>
  <img src="img_snow_wide.jpg" style="width:100%">
7 m4 q/ B- v7 W7 C' i  <div class="text">Caption Two</div>
</div>
7 n* t. \5 ^! J& K% N( o4 Z8 B
<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
/ N/ S4 w- z$ o! F( v9 K  <img src="img_mountains_wide.jpg" style="width:100%">
1 Z& ]( V5 I8 O; a$ L7 E  <div class="text">Caption Three</div>
* F; E) n7 v8 [4 p</div>
1 \2 e2 v5 i1 e, W: }( R
<a class="prev">❮</a>
<a class="next">❯</a>

3 J0 p4 T% {5 m+ Y3 O</div>
<br>
  T' `& q* a- T0 c1 t* o9 P
# s8 }# `- l3 X* T8 A2 x+ K0 H<div style="text-align:center">
0 `& o9 E- i' g  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
1 o. h+ F6 y. R' z3 Y</div>

3 e6 [7 R8 y% I' Q/ E<script>
var slideIndex = 1;
/ h  F' `  w9 D7 a+ \) R4 D! dshowSlides(slideIndex);

function plusSlides(n) {
6 t% L) i" z7 d1 V: i4 Z$ [  showSlides(slideIndex += n);
* M2 I$ w% D9 Q  ?}

function currentSlide(n) {
2 B+ Z. j$ F2 O+ R  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
+ I1 Q6 Y  u& N7 ], z% W) j  var slides = document.getElementsByClassName("mySlides");
7 ~; r9 C' y  [0 L$ g  var dots = document.getElementsByClassName("dot");
# t; i6 l( B# e4 d! U  if (n > slides.length) {slideIndex = 1}   
( e' c. }3 w6 L4 m9 _  if (n < 1) {slideIndex = slides.length}
% w. K, z& S" L/ _- q; |  for (i = 0; i < slides.length; i++) {
8 G5 L$ T) u6 G- @0 U' B      slides.style.display = "none";  
  }
3 C  w5 \! ?* ]  for (i = 0; i < dots.length; i++) {
      dots.className = dots.className.replace(" active", "");
  }
& C" ?$ k: r+ }$ z, P/ z# m% S  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
8 u" j2 Q0 ~; C% N1 N}
7 K4 _& {5 ]+ ^/ H  ?</script>
( S7 ^7 c! v% ^7 N0 g
) q9 C# s4 B7 {! R</body>
</html>

999阿彌陀佛

你可以選擇整頁版。。

starmars

999阿彌陀佛 发表于 2020-8-12 10:06
你可以選擇整頁版。。

2 m; C5 s. G1 R) u; X5 E* n' a目前我就是这样做程序了：
每一页对应的词头实际上都将整本词典每一页的扫描文件包括进来，只是默认最开始只有一页显示而已。查每一个词得到的每一页上都可以点击或者直接输入书的页码，将新的页码“动态”添加显示在当前词条下的解释中（而不是跳转到另一个词条！）
! w7 s$ V% `  q最后的结果是：每查一个词得到显示某一扫描页，都可以通过导航查遍显示词典中其他所有页，而且还没有任何链接的跳转，其他非图片词典的解释还在那里好好的不随扫描词典页面变换增删而消失或变化！

VimVim

这完全可以实现，而且很简单：只要制作词条时，在跨页的多个页面都添加相应词条即可。

Howard345

楼主反映的问题，的确存在大多数图片词典里面，这个确实有点影响平时的使用，期待各位高手合力解决它。

; R# k/ I, s3 P: ^. i9 P还有楼主说的“能查到很多相关词（主要是同根词）”，这点表示有疑问。按照字母表排列的词典，一个页面中同根词应该不多，同前缀的词在ab、ad、con这样的页面里倒是不少。

chigre3

个人制作的切词版会显示词条所有内容，
" p4 X3 a, \# r2 U- C' ~整页版则只显示所在的首页，跨页点击下一页。
8 a3 A  g; l4 Y4 r' M1 g' t7 P) o类似 make 这样的词条会占据多页，同时显示多页不是非常有必要。

wjl

楼主能否实现根据左上角坐标和右下角坐标显示相应css 截图，如果有跨栏和跨页的情况，则将多个截图显示在一起，这里说的截图不是真实截图，而是用clip这样的来实现

starmars

Howard345 发表于 2020-8-12 11:01
楼主反映的问题，的确存在大多数图片词典里面，这个确实有点影响平时的使用，期待各位高手合力解决它。

& u. g/ s( i+ F& D还 ...

1 Z/ m* ^; n' G: z9 p9 |. O您可以随便去翻阅任何一部英汉词典PDF版，随便看几页，就能理解我的意思了。太多相关词聚集在同一个页面或者相邻页面了。

starmars

VimVim 发表于 2020-8-12 10:35
2 H$ M0 G+ C! D( ^8 W" X. p; j这完全可以实现，而且很简单：只要制作词条时，在跨页的多个页面都添加相应词条即可。 ...

是啊，可是就是没人做啊！。
您看看下面这些需求：个人认为这些要求没有哪个有我说的功能更重要。
  |- e+ p/ l( R* X  L## 成品图片词典的导航构想
    * 在页面顶部显示Pages导航 和 Keywords导航（或有）
        - Pages：Previous Next Cover Preface Content Index etc.
9 @" i2 B- Q5 l0 v! }; d        - Keywords：A B C D E F G8 l. F
; c2 B3 U2 \  t0 _1 d( `( P    * 在页面底部显示Pages导航
" j& v) D1 Z4 W( ~, c        - Pages：Previous Next Cover Preface Content Index etc
8 p% y8 H7 m% ~$ w2 o- p
* ^% B; \1 b. e& |, v  a. b    * 在Pages导航中：
( Y1 p# {( q3 |, x8 {        - 上下页，可自动处理first和last页面
        - 上下页，可自动处理多个部分的页码体系为一个连续整体，如
            - 正文前123（封面、目录等）、正文123、正文后123（索引、封底等）
        - 除了上下页外，可自定义添加封面、前言、目录、索引等固定链接。
( n1 H. o3 E  h6 n    * 在Keywords导航中：& S$ h1 s& A3 C
        - 若没有关键词，则不显示Keywords导航，适配封面、前言、目录、索引等页面
% T2 Z4 \  G8 B  H        - 若某个关键词作为mdx的keywords，即使用Keywords导航中的某个关键词进行查
7 t/ u& ]# F# o/ l3 _# B) N- l          询，则在Keywords导航中加亮该关键词。; [/ i. {2 E0 f* F  a' M
$ C% w5 w$ ^( B        - 若页面作为mdx的keywords，即使用Pages导航中的页码等进行查询，则在Keywords导航中的关键词不做加亮处理。

Mandolin

现在大部分图片词典的翻页确实都是通过跳转来实现的，

我个人猜想，这是有历史原因的，因为最开始很多新手做图片词典都是学 tsank 的教程（因为仅是入门所以也写得最简易，上手简单），后面这个图片词典的做法也就流传下来习惯了，并且大多数人对楼主提出的这个需求意愿并不强烈，算不上痛点，所以一直没有人提

还有，楼主是想实现类似韦氏词典这样的页内切换吗：
8 x/ T/ `; [/ t* y" m! ~, R* G+ @9 b


这是不是要通过 JS 实现，其实许多人 css 都还没搞太明白（比如我），别说再去弄 JS 了，更何况只是个图片词典而已
8 V* c! N8 i* u5 G) v9 }& u* r
& W1 ^& N8 [( [最后，这样实现后是不是 加载/渲染 速度会更慢了
  ^+ U2 `$ t1 P
当然，如果楼主能做出比较好的方案来自然是最好了，到时，希望能写个教程，方便后来者学习引用

starmars

0 R/ G) d& v  A5 @) E

klwo2 发表于 2020-8-12 11:59
. k7 t! C7 z6 a9 E9 r多年前的《汉语大字典》图片版就是能显示跨页的呀，楼主哪儿来的【所有图片词典】？我前几天刚发的Taber's  ...

2 p8 T  i! _% T2 q9 r1 A"能不能显示跨页，纯粹是制作的时候想不想做而已。我觉得Goldendict是多标签的，完全可以用新标签打开下一页嘛，又不是多年前的IE"---
% d7 l3 ^' Q6 C3 J8 f+ _! h3 V明明一屏就可显示全，只是因为跨页就要多标签来回切换啊？多累啊！
4 K* W! I2 W. a. o
4 i5 ~) Q' w# i& O+ v* E打一个和贴切的比喻：
3 t: l* s5 \7 W* C* M; t在Acorobat Reader和任何PDF阅读软件中，都有一项功能：在单页面视图中启用滚动。如果不启用该项功能，和目前的图片词典是一样的：一页看完了必须全部清除隐藏该页才能显示下一页，同一屏上不允许前后两个相邻页面各显示一部分。

/ {5 }* [+ y/ U& P我相信，如果一个PDF软件没有该功能可以启用，即使它其他无数琐碎的小功能做得再多再好，绝大部分人也会离它而去而换用其他有此功能的PDF软件，因为这个功能实在是太重要了，比任何其他功能都更重要！
$ f; i9 f% m6 p& F2 h0 x! P, O* Y
正是因为做词典软件的人太少，我们没有选择的权力只能接受。但难道将此问题提出来也不行吗？是否解决不敢奢求，但提出来让制作者知道，还是没错的吧？
1 k0 K; \1 j) E2 U. `: |8 B9 R6 ~
, k' [- k9 S$ G$ a还是那句话，人家不做的话，我来做吧！


3 ^- R; ~- W  l" p

starmars

7 V. T3 Z* B7 j4 q  X6 X% N8 A6 H

Mandolin 发表于 2020-8-12 12:23
/ Z: c% w* @+ |- F! E' H现在大部分图片词典的翻页确实都是通过跳转来实现的，
( J, N/ }8 b" S- k% {" D% T, _
我个人猜想，这是有历史原因的，因为最开始很多新手 ...

  V0 v$ p# @6 f0 f+ i5 \) `“还有，楼主是想实现类似韦氏词典这样的页内切换吗” -- 不是的，我说的不是这个意思。
您那个是切换，太累，我要的是一个词条内容在一屏幕显示完整。上页显示下半部分，下页显示上半部分。可以看我的截图，词头absence跨页，我的图片词典版本是输入absence时先显示的第7页内容，单击第7页下方的一个“下页”按钮，激发一个JAVASCRIPT事件（而不是做词头跳转），将下一页第8页动态添加到第7页下面显示出来（同时将7-8页之间的“下页”按钮隐藏掉，所以截图里看不到“下页”两个字了）。您可以看到我还同时打开了其他词典，其他词典的解释在点击“下页”之后不会消失该在哪还在哪。滚动条滚动就可以看全所有词典对该词条的解释。
3 {% E# F* |4 Z- h本人即将推出一些解决了这个问题的图片词典版本。短短上百行JS程序，可以大大方便使用者。等我一推出这种动态添加页面的版本，我打赌你们不会再用以前那种跳转的版本了！

此外，大家可以看到第7页的absence和第8页的absent显然是相关词，如果能同时看到多好！这种相关词跨页的情况远比某一个词头跨页的情况多太多，太常见了。
前后两页同时显示出来，绝对是一个核心的重要的需求，远超过那些琐碎的小小的可有可无的功能（比如“在一个页面顶部显示该页所有单词且所查的词高亮”这种功能，一个扫描页面上不已经有所有单词了吗还要这个功能干啥呢？这功能不能说没用但比我这功能相比，谁更重要一看便知了）

7 l( p/ ~5 I6 h+ @  T- h3 o2 j
4 S4 `! g4 _) x1 R% f& ~

klwo2

starmars 发表于 2020-8-12 12:30
" c) K7 ^# Q$ x; N"能不能显示跨页，纯粹是制作的时候想不想做而已。我觉得Goldendict是多标签的，完全可以用新标签打开下一 ...

) ?  [& m7 m$ l& m+ V8 k我讲过了啊，有的图片词典是处理了跨页的，你要非说所有的制作者都不知道，这只是你的幻想。

愿意做当然可以做，只有做了才知道时间精力成本嘛。假如说我做个普通的图片mdx，只要1小时，加上某某功能，变成2小时了，我乐意嘛？不乐意。假如说，出了某某神器，1小时变1小时10分钟，我想大家伙自然是欢迎的。
( A6 w9 _, N$ w# f3 P; ^; `1 P
/ X& D2 w- M: u3 _5 a2 \( f* w我看楼主是迫不及待想要推广你设计的神器，那大家伙就翘首以待咯。不过还是那个话，光嗓门大是不能说服人的。我建议楼主也大可不必贬低其他的形式。现如今电子版这么普及，出版社不是一样出纸书吗？也没见论坛里的谁谁谁天天骂出版社出纸书，落后愚昧不方便？抱着纸书就不能学外语了，还是用了某种高大上的神奇格式，一夜就学会了外语，这稀奇事咱都没见过，所以大可不必这么夸张

wjl

点击上下页的时候触发点击事件用JavaScript在DOM树上动态添加下一页或者上一页显示就可以了，这一句估计很多人都不明白，大多数都是只懂一些css 颜色、字体方面的设置

klwo2

wjl 发表于 2020-8-12 13:38
/ {( p& G; {/ [, g点击上下页的时候触发点击事件用JavaScript在DOM树上动态添加下一页或者上一页显示就可以了，这一句估计很 ...

1 m- {2 C7 o2 G. w8 ~* Y7 t我理解楼主的意思是：某些词条，尤其是跨页的词条，要一次在同一标签里看到词条的所有内容，不用动手
2 I" C) m8 @" {9 T$ b
$ q8 h" V4 l; ^你的方案是：所有词条，不管本身跨页与否，要能在同一标签内不断往下加载，而不用开新标签，这个动作需要用手点【下一页】

这两个东西的唯一共同点是【同一标签】。

, u0 F! y/ ^2 j4 x: D* ]* ]! E我本人并不讨厌多标签，我觉得多标签挺好的，所以目前不急于改这一块

wjl

不知道这样是不是楼主所说的痛点
2 \& P3 A7 ]4 j9 F# q


2 ~) f9 C$ o  D9 Y: T

starmars

0 p; V7 h3 \; n# \& S8 |. E

wjl 发表于 2020-8-12 19:09
不知道这样是不是楼主所说的痛点

7 R0 P4 b4 ~* L! G1 Hwjl朋友：看了你的操作动画，一个单词跨两页你切的图也相应跨两页，我真的很佩服您的切图，太精益求精了。然而，即使是您这样的辛勤劳作，仍然不能满足我的要求哇！
3 S, \  ?, T5 G' d2 I因为，我查词典不仅仅只为查这个单词，我需要的是同时还要看到它的相关词触类旁通扩大词汇量！说实话，这么多文字版MDX了，牛津朗文韦氏柯林斯这么多精华文字版词典都全了，有几部图片词典是文字版MDX无法替代非要用它的呢？用图片词典的主要原因不就是为了能看到相关词汇！这是图片词汇的精髓所在！我坚信有我这需求的人绝非凤毛菱角，而是绝对有一批可观的人，只是这些使用者没有想我一样勇敢地站出来说真话而已！
( k4 s% w0 O* ]
: c/ b* ~1 o  {, k6 F5 y一个单词可能根本没有跨两页，但与之相关的（同根）词汇众多，它们完全可以跨两页甚至更多页！最好的做法就是能同一屏显示多个页面，可以随意滚动查看这些页面而无需麻烦地前进后退来回切换。
( f* o$ Y$ |1 X) b) }
; M: c6 L: Y9 }% k3 j7 Twjl, 您可能会说MDICT左栏不是能看见字母顺序排列的单词条目吗？ 但您那可能是只打开了一部图片词典！须知，一般人都是同时打开好多词典的，此时词典软件将会将所有词典中的单词加起来来显示这些词目，但加起来就不得了了，即使去重了，仍旧有太多并不想看到的实际上是重复的词目（有太多的MDX盲目乱加ENTRY造成表面不同但实际内容是大量雷同的ENTRY）。换句话说，只有仅打开一两部词典的时候看到的相关词才有意义没有太多的冗余 ———— 我说了这么多不知道表达清楚我的意思没有，您试试就知道我什么意思了。

8 f6 W- f) P8 |我实在不明白有什么必要费那么大的劲儿搞精确匹配，甚至要把每个单词都切图出来？？我查一个单词，仅仅将这个单词所在的页面自动呈现出来就足够了，至于在这个页面上我肉眼找到这个单词要三秒钟还是五秒钟？这重要吗？一个页面上看不全相关词，或者一个词解释跨两页，仔细查看揣摩理解要反复来回切换好多次，每次切换后退都相当于重新查一次这个词，如果同时打开的词典很多或者这个词目又是义项例句特多的，这反复切换多费的时间将远远大于在一个页面上定位要查的单词在哪个位置花的时间！精确切图看不全前后相关词，彻底将图片词典的唯一的优点给无情地抛弃了，完全是吃力不讨好的苦差事，真还不如不做的好!
3 G: `7 a, W  ^
. _; h9 }$ W8 P我即将做一个通用软件用来生成图片版MDX，它将就是一个外壳，全自动生成这些页面间的导航控件。需要的原材料仅仅是纸版词典每页的扫描文件以及每页上首词(和/或尾词)与页码的对应关系文件。用一个虚拟的大词表作为entry。欧路词典软件能做的就是，当我输入一个单词，呈现出该词典中一个扫描页面，虽不能确保这个单词一定真正出现在这页上，但如果这个单词本词典的确收录了的话将确保一定在该页面上而不会在其他页面上。据说这叫“粗略匹配”？导航控件将很方便地动态添加想要添加的前后相关页面在DOM树上（而不是跳转到另一个词条的那种方式来呈现下一页）
3 c, n2 }! f# }) G
3 b# a, w! i, U6 u0 Z6 g
) Z3 R2 z4 a' c$ q0 ?+ T
/ w' P* j6 p% V( `- X9 G, N9 N

wjl

starmars 发表于 2020-8-12 20:31
wjl朋友：看了你的操作动画，一个单词跨两页你切的图也相应跨两页，我真的很佩服您的切图，太精益求精了。 ...

! h  U9 O$ _+ M5 i我这个没有切图，只是通过css显示图片的不同部分，所用图片只有纸版词典扫描页。
9 e/ D+ o; h( X2 i9 ~) @( d2 V期待你的通用软件，现在我还不是很明白你的意思。你是要在一个屏幕显示与查询词相关的所有单词（同义词、反义词、同根词等）吗？

starmars

& u! r/ x+ H1 g* Q

wjl 发表于 2020-8-12 21:16
我这个没有切图，只是通过css显示图片的不同部分，所用图片只有纸版词典扫描页。
期待你的通用软件，现在 ...

2 c* M7 `/ z) d# L在我看来，只显示图片的一部分和切图，本质和工作量是一样的，都需要弄出来每个单词解释对应于扫描图片的位置坐标，这个活可不是好做的。
( b) F( F) M1 W) n8 |& Y我是想做一个生成MDX文件的自动软件，需要的素材仅仅是纸版词典每页首词（和/或尾词）和页码的对应关系文件。不要再让人去正则替换了。
请问你的CSS通过什么方式达到只显示图片一部分的目的？
; ]* m, R6 a) F3 F! W8 q

wjl

starmars 发表于 2020-8-12 21:37
在我看来，只显示图片的一部分和切图，本质和工作量是一样的，都需要弄出来每个单词解释对应于扫描图片的位 ...

使用的是【Clip 座標切圖法】製作不切圖片的切圖法
https://www.pdawiki.com/forum/thread-36043-1-1.html
9 ?+ I8 b+ a# O: z7 f1 i8 @中的方法，不过我这个是简化版，没有用clip，只用margin-top: -936px; 之类的将图片上移就行，不过必须要有准确的坐标数据才行

wjl

starmars 发表于 2020-8-12 21:37
在我看来，只显示图片的一部分和切图，本质和工作量是一样的，都需要弄出来每个单词解释对应于扫描图片的位 ...

4 T& s$ F( q( @- v你的这个需求用以下工具就能满足吧
（更新）图片版mdx源文件生成工具
2 G4 G+ w5 T$ p# }6 ^9 g% dhttps://www.pdawiki.com/forum/thread-33574-1-1.html
# i/ n" A+ ]/ a9 i' d

chigre3

starmars 发表于 2020-8-12 20:31
wjl朋友：看了你的操作动画，一个单词跨两页你切的图也相应跨两页，我真的很佩服您的切图，太精益求精了。 ...

[设想]一种新的词典格式[专为图片版词典设计]
3 u8 r$ K$ J  W' nhttps://www.pdawiki.com/forum/thread-22035-1-1.html
) a1 w. t- ?' G+ O(出处: 掌上百科 - PDAWIKI)

VimVim

完整看了楼主的所有讨论，发现原来的理解有误，重新梳理一下。

5 d' a$ d, q+ P提出的需求是：“同时显示词典的两个页面！” 或着说 “不切换查询词条地翻页”。
- z4 g& S' V# o" O6 O
& M: k7 X! }( B! h5 N4 I提出的解决方案是：“做一个通用软件用来生成图片版MDX，全自动生成这些页面间的导航控件”，”上百行JS程序“，“仅需每页上首词(和/或尾词)与页码的对应关系文件”、“整页版扫描件”、”虚拟的大词表“，实现“模糊匹配”，并且“导航控件可很方便地动态添加想要添加的前后相关页面”。

; f0 J$ \- A2 `+ P5 A* G$ e重点或者说区别于其他技术方案的要点：”导航控件可很方便地动态添加想要添加的前后相关页面“，而不影响其他词典查询结果的显示。

特请教楼主几个问题：
9 [0 y. J' L: S. J) U
问题1：”虚拟大词表“ 比较适合按字母/读音序排列词典，而图片词典的类型多种多样，这个程序如何适应更多类型的图片词典？如何最大化降低误查率？普通的词典制作者能否搞定上述问题？
问题2：”上百行JS程序“ 是指嵌入在词典中用于动态生成导航信息的js，还是指用于生成mdx词典的”通用软件“？
1 z3 r. q+ Q  ~: p- X4 ^/ Z) Z# G问题3：看到讨论中仅提到”欧路词典软件能做“，但很多人使用开源的GoldenDict或其他词典软件，程序是否兼容市面上主流的几款词典软件？
问题4：这个程序是开源的吗？用户可扩展性如何？

starmars

wjl 发表于 2020-8-12 21:51
6 H- b9 P: m1 A, c5 l3 z你的这个需求用以下工具就能满足吧
（更新）图片版mdx源文件生成工具
6 m8 N; u. H7 @) Uhttps://www.pdawiki.com/forum/thr ...

4 Z+ ]5 G: [. U6 s这个工具满足不了，因为它是精确匹配。我只求粗略匹配，没有必要（或者说是误导）在每个单词页面上展示该页其他单词，因为其他单词可能根本就不存在于该页中（这便是粗略匹配的含义）。
* K* L3 j/ j/ |' U$ [& V! `3 k7 s我一贯认为在扫描页面（顶部）列出本页面OCR出来的单词是毫无意义的事情，似乎除了向大家展示 “ 嘿，这是我OCR的成果哈！别忘了我下过苦工精确匹配的哈，我比那些粗略匹配根本不实际OCR每页的人辛苦多了哈，别忘记我的贡献哈！” 毫无用处，因为这些单词本来就在扫描页面上呢，有何必要将释义剥离仅将词头单独列出来？点击这些词头也毫无用处不还是本页吗？