EPUB3可回流-固定布局文本到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的transform: scale()。

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

我担心的是，我已经编码的文本调整大小的方式是…

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 =函数和addEventListener(resize, function)之间的差异。它们的编码完全相同，但结果"不同"。

如果你调整窗口的大小，你会看到，大约3个大小调整后，文本适合容器的绝对字体大小水平更接近，并有更少(或根本没有)的transform: scale()拉伸或压缩。

但是每次onload =函数被调用时，文本对于容器来说总是太大或太小，并且总是被拉伸或压扁到不可接受的程度。

我怎么能编码这个，使在onload =函数的字体大小是真实的开始外div高度?

谢谢你的调查。

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

Answer 1

所以我一直在研究它，并看到外部文本div与内部文本div (jsFiddle中的frameScale)的比率将决定最终的百分比偏差。这就是我的意思:

无论frameScale偏离1.0多远，都会根据一些奇指数函数决定最终的frameScale离1有多远。因此，如果您从1开始(意味着外部文本div与内部文本div一样大)，那么结果比率也将是1。如果是1.3，则比率骤降至0.84。如果是1.6，那么就变成了0.72。如果它是2.00，那么它就会变成0.5，以此类推。我想不出来，所以我决定另当别论。

如果多次调整它的大小使字体大小更加真实，那么我决定使用我已经调用的resizeListener函数来调整它的大小。我所需要做的就是在函数的第一部分将大小调整为父元素，然后在第二部分将大小调整为父元素。有一点需要注意的是，祖父母与孩子的高度比不能与frameScale(父母与孩子)相同。所以我这样做:

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

不管什么原因，0.5似乎工作得很好。也许这在许多不同的情况下会失败，但现在这是一个很好的解决方案。我所做的只是调整了容器的大小两次。这里是jsFiddle:

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

编辑:这并没有回答问题。为什么开始帧尺度对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/