基于宽度的文本缩放

Question

I converted a PDF into an HTML using an online converter. Here's an example result: http://www.ww2incolor.com/500px/e8efe9ed-37d4-45c4-bd12-178d9bac0947/e8efe9ed-37d4-45c4-bd12-178d9bac0947.html

It does a pretty good job, but is it possible to have it scale to 100% width to make it mobile friendly? Getting the image to scale to 100% width is pretty easy, but the text doesn't seem to wanna scale at all. I've looked into font scaling, but that messes up the location of the text which is important. Essentially both image and text need to scale in tandem. transform: scale(X) does what I want it to do, but the width of the PDF can change, so it's not a good solution unless you can make it dynamic. Does anybody know if that is possible?

Answer 1

Perhaps with the ONRESIZE event in your PDF's container:

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

I hope I understood you well.

Answer 2

You can use js to scale the page, like this:

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

Call this on document ready, resize, and orientation change events:

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