Question

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

原因：该文件是预先印制的表格。我试图将文本放在屏幕上，以便它与实际表格上的“空格”相关。

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

我尝试了什么：

我使用标尺来物理测量位置并使用CSS指定它们。但是在屏幕上，它并不合适。
我使用扫描图像来定位CSS值。然后打印输出不正确。
我甚至使用Inkscape将扫描页面缩放到厘米的精确尺寸，并考虑了所有边距等...

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

谢谢！

Answer 1

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

Answer 2

您需要创建一个特定的CSS样式表进行打印，即使您没有像您说的那样靠近您。必须以这种方式完成...无论您在屏幕上测量多少次，打印机都会打印出不同的数据。它需要的CSS，但真正的交易是你必须得到和理解的打印机内部配置。

你应该阅读本教程，我发现它很有用！ 粉碎杂志 How to Setup a Print Style Sheet。

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

我这样做了一次，我一直在努力，直到我不得不打印这些信息。打印机知道一切！它的边缘，它的尺寸，从左到右，从右到左等多少像素在考虑。你需要知道它，你需要知道它的完美打印你的格式适应你的CSS到这个不可移动的提供者值

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

祝你好运！ =）

Answer 3

我认为你可以使用JS的坐标。

使用设计软件（绘画可以作为工具......）来获取您必须放置的每个元素的坐标
使用JS来放置具有坐标的元素

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

Answer 4

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

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

与此类似：

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>';
      }
}

这样可以看到确切的坐标，文字必须非常小，但它可以让生活更轻松。

Answer 5

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

如果这不起作用，那么应该确实知道它是如何工作的。文本行是否正确，但是所有像素都向上或向下移动了一定数量的像素？那么它可能是一个线高问题。文本是否按行正确排列，但随着行的进行，单词会不同步？可能与不同的字母和单词间距有关。等

CSS用于指定扫描文档的位置

5 个答案: