Menu
TLDR: If you print UIWebView which contains HTML content consisting of elements with text aligned right / center, resulting document will have pages with unexpectedly large bottom margins.
I came across this issue, and was quite surprised when I could not google anyone with similar problem. I have filed a radar with apple (#20760071) and also created an issue on ResearchKit's GitHub repo, as this affects their ORKHTMLPDFWriter.
AFAIK this also affects all libraries that use UIWebView for converting HTML to PDF, I have tested:
I am wondering if anyone can come up with some workaround.
How to reproduce:
NSMutableString* html = [NSMutableString string];
[html appendString:@"<html><body>"];
for (int i=0; i<200; i++) {
[html appendString:@"<div align=\"right\">line</div>"];
}
[html appendString:@"</body></html>"];
UIPrintInteractionController* pc = [UIPrintInteractionController sharedPrintController];
UIPrintInfo* printInfo = [UIPrintInfo printInfo];
printInfo.outputType = UIPrintInfoOutputGrayscale;
pc.printInfo = printInfo;
pc.showsPaperSelectionForLoadedPapers = YES;
UIWebView* web = [UIWebView new];
[web loadHTMLString:html baseURL:nil];
pc.printFormatter = web.viewPrintFormatter;
[pc presentAnimated:YES completionHandler:^(UIPrintInteractionController *printInteractionController, BOOL completed, NSError *error) {
NSLog(@"%d -- %@",completed, error);
}];
You can also clone the project demonstrating this issue in ResearchKit.
Knowing specific width of the content (e.g. images), one can align it without specifying text alignment, e.g:
Using automatic margins:
<div>
<div style="width:200px; margin-left:auto; margin-right:0px;">
content
</div>
</div>
Floating columns:
<div>
<div style="width:200px; float:right;">
content
</div>
</div>
However, none of the above works for aligning variable length text, which is the main use case I am concerned with.
733
Vano,
The solution that I came up with after some testing is adding the following css rules with the text align.
display: -webkit-box;
display: -webkit-flex;
display: flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
text-align:right;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With