基于宽度的文本缩放

Text Scaling based on width

本文关键字：缩放 文本 于宽度      更新时间：2023-09-26

我使用在线转换器将PDF转换为HTML。下面是一个示例结果：http://www.ww2incolor.com/500px/e8efe9ed-37d4-45c4-bd12-178d9bac0947/e8efe9ed-37d4-45c4-bd12-178d9bac0947.html

它做得很好，但是是否可以将其缩放到100%宽度以使其适合移动设备？将图像缩放到 100% 宽度非常容易，但文本似乎根本不想缩放。我已经研究了字体缩放，但这弄乱了文本的位置，这很重要。基本上，图像和文本都需要同时缩放。transform：scale（X） 做了我想要它做的事情，但 PDF 的宽度可以改变，所以除非你可以让它动态化，否则这不是一个好的解决方案。有谁知道这是否可能？

您可以使用 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

也许在 PDF 容器中的 ONRESIZE 事件中：

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

我希望我能很好地理解你。

相关文章：