javascript - EPUB3 Reflowable-Fixed Layout 动态调整文本到 Div 的大小

Question

我创建了这个 jsFiddle:

https://jsfiddle.net/j994tnu2/4/

if(textH < (parentH - deviation) || textH > (parentH + deviation)) {
  text.style.transform = "scale(1, " + frameScale + ')';
  //alert("transform");
}

https://jsfiddle.net/j994tnu2/5/

if(textH < (parentH - deviation) || textH > (parentH + deviation)) {
  //text.style.transform = "scale(1, " + frameScale + ')';
  //alert("transform");
}

版本 4 有 1 行未注释，允许转换:直接包含文本的 div 的 scale()。

版本 5 注释了这 1 行，不允许发生这种情况。

我担心的是我对文本进行编码以调整大小的方式是......

textScale1 = 0.78;
textScale2 = 1;
textScale3 = 1.4;
//textScale4 = fontSize2 / fontSize;

//applies the master frameScale once to a single style of a class
fontSize2 = Math.round(10 * fontSize2 * frameScale) / 10;
//uses the relative textScales to this element to style the rest
fontSize = Math.round(10 * fontSize2 / textScale1) / 10;
lineH = fontSize;
margin = Math.round(10 * fontSize2 / textScale2) / 10;
lineH2 = fontSize2;
margin2 = Math.round(10 * fontSize2 / textScale3) / 10;

通过手动检查每个元素的字体大小和边距，并将它们更改为相对于文本中自身和相对于外部 div 容器大小的比例。这实际上是使文本相对于原始格式保持真实的好的部分。然而，

我遇到的问题是 onload = function 和 addEventListener(resize, function) 之间的区别。它们的编码完全相同，但结果“不同”。

如果您调整窗口大小，您将看到在大约 3 次调整大小后，文本在绝对字体大小级别上更加适合容器并且更少(或根本没有)转换:scale() 拉伸(stretch)或压扁。

但是每次调用 onload = 函数时，文本对于容器来说总是太大或太小，并且总是会被拉伸(stretch)或压扁到 Not Acceptable 程度。

我如何编写代码以使 onload = 函数中的字体大小与起始外部 div 高度一致？

感谢您的关注。

编辑:这很有趣。注释掉 onload=function 并让 resize 函数执行第一次调整大小，您将获得与 onload=function 完全相同的结果。其中，一致性很好。但为什么后续调整大小会增加字体大小的准确性？即使我调整大小，然后又缩小到接近同一位置，文本看起来不会那么压扁，而且更符合它的比例。初始调整大小很糟糕。为什么？它怎么可能随着时间的推移而提高准确性？

Answer 1

所以我一直在努力，发现外部文本 div 与内部文本 div(jsFiddle 中的 frameScale)的比率将决定最后的偏差百分比。这就是我的意思:

无论离 1.0 有多远，frameScale 的偏差将根据一些奇数指数函数确定结果 frameScale 与 1 的距离。因此，如果您从 1 开始(意味着外部文本 div 与内部文本 div 一样大) 那么合成比率也将是 1。如果它是 1.3，那么该比率将暴跌至 0.84。如果它是 1.6，那么它会变成 0.72。如果它是 2.00，那么它会变为 0.5，依此类推。我想不通，所以我决定做一个解决方法。

如果多次调整它的大小使字体大小更真实，那么我决定只使用我已经调用的 resizeListener 函数调整它的大小。我需要做的就是在函数的第一部分调整祖父元素的大小，然后在第二部分调整父元素的大小。一个问题是祖 parent 与 child 的高度比不能与 frameScale( parent 与 child )相同。所以我这样做了:

if(masterScale = frameScale) {
masterScale = masterScale - 0.5;
}

无论出于何种原因，0.5 似乎效果不错。也许这会在许多不同的情况下失败，但现在这是一个很好的解决方法。我所做的只是将容器大小调整两次。这是 jsFiddle:

https://jsfiddle.net/j994tnu2/6/

编辑:但这并没有回答问题。为什么开始 frameScale 与 1 的偏差决定了转换后与 1 的偏差增加？如果我想要它完美，我可以创建一个 if() else if() 塔，一直调整到某个不会自然发生的比率:

1.0-1.04 >>> 1.0

1.05-1.29 >>> 0.94

1.3-1.34 >>> 0.84

1.35-1.6 >>> 0.8

1.61-??? >>> 0.7

1.99-??? >>> 0.49

无论出于何种原因，从开始比率中减去使合成比率为 1.0 所需的量会将合成比率调整为 1；这没有意义。这是一个 jsFiddle 正在做这件事，并且比调整祖父元素的大小要好得多:

https://jsfiddle.net/j994tnu2/9/