限制内容到单打印页面的想法?

时间:2010-06-12 23:03:37

标签: javascript jquery html css printing

我有5-6个文本区域,用户在模板中填写(几列,基本上是新闻稿格式)。我需要将他们的内容限制在一个打印页面,但我很难找到实用的解决方案。所有用户的打印格式(边距,字体大小等)都是相同的,因为它是从中央来源打印的。

我有几个想法,但所有这些想法似乎都不可靠且难以实施:

  • 使用JavaScript确定内容的高度并估算内容的打印页数。这个问题是浏览器字体大小可能会有所不同,只是粗略估计(像素到英寸)等
  • 限制字符数。这是有问题的,因为有各种文本字段,某些字符(如M)占用的空间比其他字符(如I),并且换行显然很重要更多。

你们有什么想法?感谢您的帮助!

3 个答案:

答案 0 :(得分:1)

测量内容等可能非常棘手。相反,请阅读如何制作print stylesheet。 CSS让您可以控制文本的打印内容和方式。

修改

我从未按照你想要的方式进行限制页面打印,但我认为通过使用固定字体(每个字符占用的空间完全相同),你或许可以将它拉下来。因此,尝试打印一个充满固定字体字符的页面,然后查看您在x和y中适合的字符数。然后使用JavaScript来监视(在运行中,使用例如jQuery)输入框,它们已经消耗了多少行。然后,您可以限制用户输入太多的文本/换行符(您需要编写所有这些代码,因为我怀疑有一个解决方案)。您还需要考虑打印页面上文本区域之间的间距。这有道理吗?

答案 1 :(得分:1)

您可以使用等宽字体格式化打印输出 - 这意味着字体上的每个字母/数字/等都是相同的宽度(例如Courier)。由于类似的原因,等宽字体在早期的计算机时代非常流行 - 它允许开发人员控制屏幕上显示的内容。

对于列的固定宽度,您现在可以确切地确定用户每行可以添加的字符数。剩下的唯一挑战是占用换行符,你可以通过使用Javascript搜索它们来做。

所以,鉴于这些变量:

  • 给定元素中每行的字符数(列的宽度)

  • 每个元素的行数(内容框的高度)

您现在可以提前确切地知道您的内容是否适合页面。

您计算每个输入字段的行数,而换行只会强制您开始计算另一行,而不管当前行中有多少个字符。

这应该可以为您提供所需的控制量。

至于外观,只要你想要那种“打字”的感觉,它的风格并不难看起来很有趣;)快速网页搜索会产生一些可以提供帮助的等宽字体:

答案 2 :(得分:0)

页面溢出时减少行间距。

LineHeight = 12'默认

MaxLines = 50

- 在这里计算行数

如果CountLines> MaxLines然后LineSpace = lineSpace * MaxLines / CountLines

最复杂的选项是改变字体大小直到适合。