Масштабирование текста по ширине

Question

Я преобразовал PDF в HTML, используя онлайн-конвертер. Вот пример результата: http://www.ww2incolor.com/500px/e8efe9ed-37d4-45c4-bd12-178d9bac0947/e8efe9ed-37d4-45c4-bd12-178d9bac0947.html

Он довольно неплохо работает, но возможно ли его масштабировать до 100% ширины, чтобы сделать его мобильным? Получить масштаб изображения до ширины 100% довольно легко, но текст, похоже, не хочет масштабироваться вообще. Я посмотрел на масштабирование шрифта, но это портит расположение текста, что важно. По сути, изображение и текст должны масштабироваться в тандеме. transform: scale(X) делает то, что я хочу, но ширина PDF может измениться, поэтому это не очень хорошее решение, если вы не можете сделать его динамичным. Кто-нибудь знает, возможно ли это?

Answer 1

Вы можете использовать js для масштабирования страницы, например так:

var page = document.querySelector('#pf1');

var getRatio = function(elem){
    return document.body.offsetWidth / elem.offsetWidth;
};

page.style.transformOrigin = 'center top';

var applyZoom = function(){
    page.style.transform = 'scale(' + getRatio(page) + ')';
}

Вызовите это для готовых документов, событий изменения размера и изменения ориентации:

document.addEventListener('DOMContentLoaded', () => applyZoom());
window.addEventListener('resize', () => applyZoom());
window.addEventListener('orientationchange', () => applyZoom()); // probably not needed

Answer 2

Возможно, с событием ONRESIZE в контейнере вашего PDF:

<div id="PDFbox" onresize="DoScale();"></div>




 function DoScale(){

 // Get your new container dimensions...

 var W=PDFbox.outerWidth;

 var H=PDFbox.outerHeight;  

 // and then based on whatever logic you prefer, dynamically scale
 whatever is neccessary...


AnotherID.style.transform='scale(2,2)';
}

Надеюсь, я вас хорошо понял.