pdflib - is there's a way to rotate the page of pdf - pdflib

before rotate
this is what i generate, with A4 Page.
before
after rotate
after generate, i wanna rotate the page like this.
please help me.
after

Totally possible!
Have a look at the PDFLib Cookbook (great resource for learning!), more specifically the sample for rotate_pages.
Basically you import a page into a document and place it with a new orientation. That will "rotate" the page as you like.
PHP sample code from the cookbook:
/* Loop over all pages of the input document */
for ($pageno = 1; $pageno <= $endpage; $pageno++)
{
$page = $p->open_pdi_page($indoc, $pageno, "");
if ($page == 0)
throw new Exception("Error: " . $p->get_errmsg());
/* Page size may be adjusted by fit_pdi_page() */
$p->begin_page_ext(0, 0, "width=a4.width height=a4.height");
/* Place the imported page on the output page. Adjust the page size
* automatically to the size of the imported page. Orientate the
* page to the west; similarly you can orientate it to the east or
* south, if required.
*/
$p->fit_pdi_page($page, 0, 0, "adjustpage orientate=west");
$p->close_pdi_page($page);
$p->end_page_ext("");
}

Related

PDFlib - using ArtBox to store width and height of placed elements

Using PDFlib I'm adding elements to a page. My objective is to somehow retrieve combined height and width of the elements after page is closed with $p->end_page_ext("");.
I know combined height of elements added to that page.
Question. Is it possible to use PDF's ArtBox to somehow store these dimensions and later retrieve them?
I'm not interested in page's height or width - only the space that added elements occupy.
with PDFlib you can also add the ArtBox to a page. (use option "ArtBox {llx lly urx ury}" within the begin_page_ext/end_page_ext() option list.
Afterwards you can retrieve this values from the PDF. For example when using the pCOS interface (it's part of PDFlib+PDI, PLOP, or TET). You find a code sample for the MediaBox in the pCOS Cookbook: https://www.pdflib.com/pcos-cookbook/pages/page_size/
To retrieve the ArtBox you just need to use the pCOS paths:
// $pageno is the 0 based index of the pages. First page is 0
if ($p->pcos_get_number($doc, "type:pages[" . $pageno . "]/ArtBox") == 5)
{
$llx = sprintf("%.2f", $p->pcos_get_number($doc, "pages[" . $pageno . "]/ArtBox[0]"));
$lly = sprintf("%.2f", $p->pcos_get_number($doc, "pages[" . $pageno . "]/ArtBox[1]"));
$urx = sprintf("%.2f", $p->pcos_get_number($doc, "pages[" . $pageno . "]/ArtBox[2]"));
$ury = sprintf("%.2f", $p->pcos_get_number($doc, "pages[" . $pageno . "]/ArtBox[3]"));
}

Retina Devices in web developing: Do I still need to have 2x images?

A lot of the information about Retina devices comes from ~2013 but not much recently.
It seems like, for example in retina.js, it includes anything with a device pixel ratio of > 1.5 to be "retina", but don't all smartphones have well over 1.5 these days? My desktop computer does as well.
My question then, why not just always serve the highest possible resolution images you have access to instead of creating the half-sized versions for "non-retina" devices, which as far as I know don't really exist much and won't suffer much from being served a higher resolution image.
Thanks!!!
Using 2x images is a huge pain.
Who can know what is "best," but I'm currently working with images in a combo like this:
I use a parent element so that the image will fill it - and that parent/or it's ancestors will determine any limits. You can use the picture element. (usually, the src are supplied by a CMS or something {{image.small.url}} etc.
The official answer to your questions would be, that people don't serve the higher res file to everything - because the file is bigger and they want the site to load as fast as possible. / but if you double the images size (twice as big as it will ever be presented, and compress to ~40 or so) then use the parent element to size it - it's actually a smaller file size. There are very specific studies on this. I don't know how that works for painting and browser rendering, though.
MARKUP
<figure class='poster'>
<img src='' alt=''
data-small='http://placehold.it/600'
data-medium='http://placehold.it/1000'
data-large='http://placehold.it/2000'
/>
</figure>
STYLES (stylus)
figure // just imagine the brackets if you want
margin: 0
img
display: block
width: 100%
height: auto
.poster
max-width: 400px
SCRIPT
$(document).on('ready', function() {
// $global
var $window = $(window);
var windowWidth;
var windowHeight;
function getWindowDimentions() {
windowWidth = $window.width();
windowHeight = $window.height();
}
function setResponsibleImageSrc(imageAncestorElement, container) {
var large = false; // innocent until proven guilty
var medium = false; // "
var context;
if ( !container ) {
context = windowWidth;
} else {
context = $(container).outerWidth();
}
var large = context > 900;
var medium = context > 550;
$(imageAncestorElement).each( function() {
var $this = $(this).find('img');
var src = {};
src.small = $this.data('small');
src.medium = $this.data('medium');
src.large = $this.data('large');
if ( large ) {
$this.attr('src', src.large);
} else if ( medium ) {
$this.attr('src', src.medium);
} else {
$this.attr('src', src.small);
}
});
};
$window.on('resize', function() { // this should jog a bit
getWindowDimentions();
setResponsibleImageSrc('.poster', 'body');
}).trigger('resize');
});
It all depends on what you are doing - and there is no silver bullet yet. The context for each image is so unique. My goal is to get in the ballpark for each size - keep the images compressed to 40 in Photoshop on export... double the size they should be, and then the parent squishes them for retina. The size is actually smaller in most cases.
CodePen example: http://codepen.io/sheriffderek/pen/bqpPra

Set Page Size in Units with NReco (WkHtmlToPdf)

Is there a way to set print page size in millimeters, like you can with borders, in NReco - the html to pdf wrapper for wkhtmltopdf? Found a way to specify one of four page sizes in the docs, which isn't precise enough.
From reading the wkhtmltopdf docs themselves, it seems like it's also limited to predefined page sizes, rather than setting them manually in units of length.
Making this question in case I am, hopefully, wrong. Need to set page to something 15x10cm for example.
Edit: I am having trouble forcing the library to use the html page settings (as an alternative to not setting anything in the html, and setting height/width/margins in NReco, as shown in my partial answer below). This:
#page {
size: 4in 3in;
margin: 0mm 0mm 0mm 0mm;
}
actually works on print, but when I try to force NReco to use it with:
pdfConverter.CustomWkHtmlArgs = "--print-media-type";
it does nothing. Example is from front page of NReco's site too, which makes it funnier.
Looking at this snippet from the wkhtmltopdf documentation:
--page-height <unitreal> Page height
-s, --page-size <Size> Set paper size to: A4, Letter, etc.
(default A4)
--page-width <unitreal> Page width
I would say that using --page-height and --page-width would do the trick. Logic would say that these will set the page height and width in points, but in fact it is mm. If you need to convert, there are 25.4 mm in an inch, and 72 points in an inch.
Note: I will be editing this answer if I get somewhere, but for now, I guess something is better than nothing for whoever might read this.
Posting an answer that others might find helpful but that isn't the full solution to my problem:
HtmlToPdfConverter pdfConverter = new HtmlToPdfConverter();
//The page width and page height values are in mm
pdfConverter.PageWidth = 102;
pdfConverter.PageHeight = 77;
This should NOT be the accepted answer - for some reason it does NOT fully match simple html sizing. For example, if I create an html document with size ratios of 4x3 and then set these props appropriately, the resulting image on the page still does not take up the entire page (ends up smaller).
If I run the following html and set page sizes to 102 mm x 72mm I get the screenshot below, which is way off despite having the ratios right:
<html>
<head>
<style>
.reportBody {
padding: 0px;
border: 0px;
margin: 0px;
}
.reportTable{
padding: 0px;
border: 0px;
margin: 0px;
width: 102mm;
height: 77mm;
}
</style>
</head>
<body class = "reportBody">
<table class = "reportTable">
<tr>
<td style = "background-color:red">
Row 1 Column 1
</td>
<td style = "background-color:blue">
Row 1 Column 2
</td>
</tr>
<tr>
<td style = "background-color:green">
Row 2 Column 1
</td>
<td style = "background-color:yellow">
Row 2 Column 2
</td>
</tr>
</table>
</body>
</html>
Quick answer to your question is yes, the settings are in mm when you use the height and width properties, so what you are doing is correct with regard to the C# code, your sizing issue is the converter employing a 'smart' resizing technique, which is on by default. The ratio being correct but the dimensions reduced is exactly the same issue I had, which was resolved by the --disable-smart-shrinking option being included.
For a fuller picture:
I've just finished step one of getting prescription printing direct from a new Razor app done, the PDFs being generated via the NReco wrapper. I have to print to a fixed prescription sheet (215mm x 176mm) with a small margin around it. This is the code that I've got in the Controller, which returns the pdf as the fileResult variable.
public async Task<ActionResult> OutputScript(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
var model = await GetViewModelForScript(id.Value);
if (model == null)
{
return HttpNotFound();
}
// create a string writer to receive the HTML code
StringWriter stringWriter = new StringWriter();
// get the view to render
ViewEngineResult viewResult = ViewEngines.Engines.FindView(ControllerContext, "Script", null);
// create a context to render a view based on a model
ViewContext viewContext = new ViewContext(
ControllerContext,
viewResult.View,
new ViewDataDictionary(model),
new TempDataDictionary(),
stringWriter
);
// render the view to a HTML code
viewResult.View.Render(viewContext, stringWriter);
// return the HTML code
string htmlToConvert = stringWriter.ToString();
// instantiate the HTML to PDF converter
HtmlToPdfConverter htmlToPdfConverter = new HtmlToPdfConverter();
htmlToPdfConverter.CustomWkHtmlArgs = " --print-media-type --title \"SMS Script " + model.ScriptID + "\" --dpi 300 --disable-smart-shrinking";
htmlToPdfConverter.PageHeight = 215;
htmlToPdfConverter.PageWidth = 176;
var margins = new PageMargins();
margins.Bottom = 4;
margins.Top = 4;
margins.Left = 5;
margins.Right = 5;
htmlToPdfConverter.Margins = margins;
htmlToPdfConverter.Orientation = PageOrientation.Landscape;
// render the HTML code as PDF in memory
byte[] pdfBuffer = htmlToPdfConverter.GeneratePdf(htmlToConvert);
// send the PDF file to browser
FileResult fileResult = new FileContentResult(pdfBuffer, "application/pdf");
fileResult.FileDownloadName = "Script.pdf";
return fileResult;
}
The way it is now all the#media print directives are obeyed, hiding the labels that show on the screen "preview" when the PDF is generated for printing.

random default thumbnail for blogger

i'm currently learning html and css. I'm working on a blogger blog template.
My template has a front page of post thumbnails.
I have set a class for my default thumbnail for when my posts do not have an image and I have set the url in the css.
.altthumbnails {
background: url(myimagelocation.jpg);
}
is there any way I can make more than one default thumbnail? I would like to chose maybe three images to show at random when there is no post image.
Thanks for any replies
You can not do it only with pure css. But you can do it either by the server-side code you use or js which the one I suggest. Basicly one of the easiest solution for this is you can make different classes for each different image you wanna use, then you can produce a random number in js and use this number to apply different classes to your elements. Here's an example:
DEMO
In the example there are 5 different css class that supply 5 different background-image and all their names end with numbers 1 >> 5.
.thumb_1 { .. }
.thumb_2 { .. }
.thumb_3 { .. }
.thumb_4 { .. }
.thumb_5 { .. }
In javascript we're gonna loop through the objects, generate a random number 1 >> 5 and use this number to add a new class like this.
var div = document.getElementsByClassName("thumb");
//var rand = Math.floor(Math.random() * 5 ); // for just one image
for (var i = 0; i < div.length; i++){
var rand = Math.floor(Math.random() * 5 ); // for multiple images
div[i].className += " thumb_" + (rand + 1) ;
};

show tinymce contents in a div with flexible though maximum height

When using an editor like tinymce, how could i limit the height of the text a user enters so it doesn't use more space on the webpage than i want it to?
There are 2 things that i want some advise on:
In the editor:
The user enters text in a tinymce editor, he could set a text to font-size say 80px which would use up more space than a normal letter. So it's not the amount of text that i care about it's the height of the total.
In the webpage:
I don't want to give them more than say 200px worth of text on the page. But if they enter just 1 line of text with a small font-size i don't want to show a 200px space. So the height has to be flexible but with a maximum.
I know this isn't exact science but the goal here is to prevent the user from messing up the page.
To solve a similar issue i wrote the following function (placed inside an own tinymce plugin). You will need to add a variable for the maximum case and maybe tweak it a bit, but i hope this code will put you into the right direction
// this function will adjust the editors iframe height to fit in the editors content perfectly
resizeIframe: function(editor) {
var frameid = frameid ? frameid :editor.id+'_ifr';
var currentfr=document.getElementById(frameid);
if (currentfr && !window.opera){
currentfr.style.display="block";
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
}
else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
}
styles = currentfr.getAttribute('style').split(';');
for (var i=0; i<styles.length; i++) {
if ( styles[i].search('height:') ==1 ){
styles.splice(i,1);
break;
}
};
currentfr.setAttribute('style', styles.join(';'));
}
},