After embedding a PDF in a webpage, I noticed that the width of the window is smaller than the actual PDF, resulting in a horizontal scroll bar appearing. Surprisingly, the PDF itself has wide margins on both sides, making it challenging for users to view the content easily. However, when the user scrolls to the center of the PDF, the content fits perfectly.
If possible, I would like this scrolling to happen automatically.
You can find the code here. Click on the specification tab to view the PDF.
For Google Chrome, I made the following adjustments:
I replaced the embed tag with an iframe.
<iframe id='pdf_embed' height='1300' style='width: 734px; margin-left: -40px;' src='iframe_url?pdf=pdf_url.'></iframe>
On the page with the iframe, I included the following styles:
<style>
object{
width: 200%;
margin-left: -370px;
margin-top: -150px;
}
embed{
width:100%;
height:95%;
}
</style>
<html>
<body >
<object height='1430' data="<?php echo $_GET['pdf']; ?>" type="application/pdf">
<embed height='1430' src="<?php echo $_GET['pdf']; ?>" type="application/pdf" />
</object>
</body>
</html>
This solution worked well for zooming in on the PDF and eliminating the visible margins, making the text easier to read. Although it didn't work for Firefox or IE, @Infer-On's solution below provides an alternative.