【问题标题】:Scaling HTML from transcribed PDF files从转录的 PDF 文件中缩放 HTML
【发布时间】:2016-04-04 16:09:47
【问题描述】:

我有一些转换为 HTML 的 PDF 文件。我完全理解这并不理想,但这不是我可以改变的。

问题在于它将内容放置在非常特定的位置,从而破坏了移动响应能力。

典型的 HTML 如下所示:

<div class="pc pc1 w0 h0">

<div class="t m0 x0 h2 y1 ff1 fs0 fc0 sc0 ls0 ws0">Text</div>
</div>

CSS 文件是这样的:

@media screen and (-webkit-min-device-pixel-ratio:0){
.sc_{-webkit-text-stroke:0px transparent;}
.sc0{-webkit-text-stroke:0.015em transparent;text-shadow:none;}
}
.ws0{word-spacing:0.000000px;}
.fc0{color:rgb(35,31,32);}
.fs0{font-size:168.000000px;}
.y0{bottom:781.000000px;}
.h0{height:841.889770px;}
.w0{width:595.275630px;}
.x0{left:34.000000px;}
}

是否有可能以某种方式使其规模化?如果我可以应用媒体查询将所有内容的大小减少 20%,我什至会很高兴(-ier)。

【问题讨论】:

  • 只需在最外层的 div 上设置 transform: scale(0.8) 即可将其缩放 20%。
  • 谢谢!像这样扩展它也是我的想法......我想真的没有更优雅的解决方案,对吗?
  • 从发布的 CSS 中可以看出,使用了 position: absolute,所以如果不重写 html,我看不到任何其他内容
  • 我也是这么想的。
  • 其实我还有一个问题。如果我将打印媒体查询更改为使用宽度参数进行响应,有没有办法这样做?

标签: php html css media-queries html-to-pdf


【解决方案1】:

从发布的 CSS 中可以看出,使用了 position: absolute,所以除了使用 transform: scale() 之外,我还看不到任何其他解决方案(当然,如果不重写 html)

通过使用媒体查询,它可能看起来像这样

.outer {
  height: 500px;
  width: 800px;
  background: red;
  transform-origin: 0 0;
}

@media screen and (max-width: 1000px) {
   .outer {
     transform: scale(0.9);
   }
}
@media screen and (max-width: 900px) {
   .outer {
     transform: scale(0.8);
   }
}
@media screen and (max-width: 800px) {
   .outer {
     transform: scale(0.7);
   }
}
height: 400px;
width: 600px;
}
&lt;div class="outer"&gt;&lt;/div&gt;

【讨论】:

  • 非常感谢!效果好于预期。
  • @Procyon82 不客气,如果你经常处理 PDF,这个库很有趣:github.com/mozilla/pdf.js
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-08-06
  • 1970-01-01
  • 2013-12-31
  • 1970-01-01
  • 1970-01-01
  • 2019-06-16
相关资源
最近更新 更多