从转录的 PDF 文件缩放 HTML
Scaling HTML from transcribed PDF files
我有几个 PDF 文件已转换为 HTML。我完全理解这并不理想,但这不是我可以改变的。
问题在于它将内容放置在非常特定的位置,这会破坏移动响应能力。
典型的 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)。
从发布的 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;
}
<div class="outer"></div>
我有几个 PDF 文件已转换为 HTML。我完全理解这并不理想,但这不是我可以改变的。
问题在于它将内容放置在非常特定的位置,这会破坏移动响应能力。
典型的 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)。
从发布的 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;
}
<div class="outer"></div>