Масштабирование HTML из транскрибированных файлов PDF

Question

У меня есть несколько файлов 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%.

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

<div class="outer"></div>