Jakub Vano Jakub Vano - 4 months ago 41
iOS Question

Unexpected page breaks when printing UIWebView

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
.



Edit - somewhat usable workarounds:

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.

Answer

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;
Comments