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 回答