3

我正在尝试编写 CSS 规则以将文本放置在扫描的文档上。

原因：该文件是预先打印的表格。我正在尝试将文本定位在屏幕上，使其与实际表单上的“空格”相关。

问题：虽然我使用厘米定位值，但它们似乎与实际页面上的值不一致。我可以看到这种错位，因为我的扫描图像位于页面背景中。

我试过的：

  1. 我用尺子物理测量位置并用 CSS 指定它们。但在屏幕上，它不符合。

  2. 我使用扫描的图像来定位 CSS 值。那么打印输出不正确。

  3. 我什至使用 Inkscape 将扫描的页面缩放到以厘米为单位的精确尺寸，并考虑了所有边距等......

我需要什么：我正在尝试在屏幕上正确显示输出值，并让它们以正确的方式打印。我知道使用两张 CSS 表（一张用于打印）是一种选择。但是我正在开发这个程序，而不是实际打印的地方。那么有没有一种方便的方法可以将确切的屏幕位置与实际/最终打印输出上的位置相匹配？

谢谢！

4

5 回答 5

1

扫描的文档与任何其他图像一样，将其用作背景并将元素绝对放置在其顶部。以像素而不是厘米为单位进行所有测量。

于 2012-06-01T14:23:53.157 回答
1

您需要为打印创建一个特定的 CSS 样式表，即使您附近没有您所说的打印机。必须这样做……无论您在屏幕上测量多少次，打印机都会打印不同的内容。CSS 它是必需的，但真正的问题是您必须了解和理解的打印机内部配置。

您应该阅读本教程，我发现它很有用！ 如何通过Smashing Magazine设置打印样式表。

然而这还不够……您真的需要询问有关打印机的所有可能细节！有了打印机的型号，如果实际打印的人不知道，你可以去看看它打印时的默认边距，你真的应该知道。如果他们没有告诉你或者你没有找到他们，那么一定有办法告诉打印机打印它的内部配置。我需要在几秒钟内按顺序按一些按钮才能在我需要打印的模型中执行此操作。像你一样，我身边没有它。

我做过一次，我一直在努力，直到我不得不打印这些信息。打印机什么都知道！它是边距，它是度量，从左到右，从右到左考虑多少像素，等等。所有你需要它在那里，你需要知道它来完美地打印你的格式，使你的 CSS 适应这个不可移动的供应商值.

作为个人建议，您应该在 Twitter 上关注 Smashing Magazine =) 我发现他们关于网页设计和 CSS 的推文非常有趣 =)

祝你好运！=)

于 2012-06-08T15:22:21.493 回答
0

这不是一个理想的解决方案，但我想我可能会帮助您在屏幕上正确定位。

我会在表单顶部创建一个动态测试网格，以便您知道位置在哪里。

与此类似：

for($i = 0; $i < 500px; $i++)
{
      for($j = 0; $j < 500px; $j++)
      {
         echo '<span class="gridPoint" style="position:absolute; top:'.$i.'; left:'.$j.'">' . $i . ',' . $j .'</span>';
      }
}

这将允许查看确切的坐标，文本必须非常小，但它可以让生活更轻松。

于 2012-06-01T14:33:54.577 回答
0

在开始之前以固定的宽度和高度（以像素为单位）缩放扫描的图像。然后也使用像素覆盖单词。这样，当您打印时，它应该对齐，因为两者都是像素。您的文本大小和行高也应以像素为单位指定。

如果那行不通，那么应该真正告诉您确切地了解它是如何行不通的。文本行是否正确，但都向上或向下移动了一定数量的像素？那么这可能是一个行高问题。文本是否按行正确排列，但随着行的进行，单词会不同步？可能与不同的字母和单词间距有关。等等。

于 2012-06-08T00:31:27.843 回答
0

我认为您可以在 JS 中使用坐标。

  1. 使用设计软件（油漆可以是工具..）获取您必须放置的每个元素的坐标
  2. 使用 JS 将元素放置在您拥有的坐标中

它可以完成这项工作，并且坐标比测量更好。

于 2012-06-01T14:27:16.800 回答