1

我正在用 javascript 编写一个 Lessig-Method 幻灯片对象（所以很有趣，并不重要），而且我一直遇到奇怪的文本布局异常，我不能说我见过这样的异常。然而，它们在我的幻灯片中无处不在。

背景是直截了当的。演示文稿有幻灯片，幻灯片有线条。一行，可以是一个词或一个短语，在我链接的图像中，幻灯片有三行。

演示“屏幕”是浏览器窗口的视口。每条 Line 的 CSS line-height 属性由视口高度除以行数计算得出。每条 Line 都是一个 div，字体大小低于 line-height（90%，但以 px 为单位）。

一张好看的幻灯片看起来像这个页面上的第一个： bbby.org/share/so_pics.html

（我只能添加一个链接）。

这就是奇怪的地方：因为一切都是根据视口大小计算的，所以启动萤火虫控制台或切换到全屏模式会调整一切的大小（刷新时）。在某些情况下，单词的前一到三个字母会一直推到屏幕的左侧，相互堆叠。唯一不同的是我全屏并刷新（并计算了新尺寸）。

根据我设置的字体大小修改器（90%、80%，但再次以 px 设置），它可能发生在常规视图（不是全屏）上。

有没有人见过这样的东西？

4

1 回答 1

0

有趣的是，有用于拖钓的徽章。我不希望看到这个网站成为我们发表评论中的新 youtube 或失败博客。

除此之外，效果是可控的（尽管仍未解释）。通过脚本微调字体大小，我可以看到单词中的某些字母在什么时候分崩离析。

例如，在 lineHeight=269 的 div 中，单词“right”中的字母“ri”飞走了，如原始帖子中的图片所示，字体大小 >= 209，但下面什么都没有。“left”这个词中的字母“l”有一个更高的数字，可能因为“f”也是一个高字母而增加了。

对于这个非常真实且令人不安的问题 (tyvm) 的当前一致解决方法，我将 fontSize 属性设置为父容器上 lineHeight 的 73%。

于 2009-06-27T15:16:39.387 回答