iOS Drawing HTML to PDF in multiple columns

Question

I'm drawing HTML to a PDF using the code below. When the HTML renders to the device I'm using css columns to layout the HTML in two columns, but when it renders to PDF it is only in a single column. Is there a way I can render the HTML in multiple columns as a PDF? I'm guessing UIPrintPageRenderer doesn't support columns but can't find anything to confirm that.

The reason I'm using css columns is that the content is of variable length and I want it to overflow to the next column dynamically.

Here's my code. content is a String that contains HTML. I send the exact same string to UIWebView.loadHTMLString(_:baseURL:) and it renders in two columns.

    let renderer = UIPrintPageRenderer()
    renderer.headerHeight = 36
    renderer.footerHeight = 36

    let htmlFormatter = UIMarkupTextPrintFormatter(markupText: content)
    htmlFormatter.startPage = 0
    htmlFormatter.contentInsets = UIEdgeInsetsMake(0, 36, 0, 36)
    renderer.addPrintFormatter(htmlFormatter, startingAtPageAtIndex: 0)

    let paperRect = CGRectMake(0, 0, 612, 792)
    let printableRect = CGRectInset(paperRect, 0, 0)
    renderer.setValue(NSValue.init(CGRect: paperRect), forKey: "paperRect")
    renderer.setValue(NSValue.init(CGRect: printableRect), forKey: "printableRect")

    let pdfData = NSMutableData()
    UIGraphicsBeginPDFContextToData(pdfData, CGRectZero, metadata)

    for i in 0 ..< renderer.numberOfPages() {
        UIGraphicsBeginPDFPage()
        let bounds = UIGraphicsGetPDFContextBounds()
        renderer.drawPageAtIndex(i, inRect: bounds)
    }
    UIGraphicsEndPDFContext()

The CSS for rendering in columns that works for UIWebView.loadHTMLString(_:baseURL:) but not for PDF is below. I have the @media bit to only show in a single column on smaller screens. However I've tried both removing this and adding an @media print section to no avail: it still only prints as a single column for PDF.

    .content {
        -webkit-columns: auto 2; /* Chrome, Safari, Opera */
        -moz-columns: auto 2; /* Firefox */
        columns: auto 2;
    }
    @media screen and (max-width: 736px) {
        .content {
            width: 100%;
            -webkit-columns: auto 1; /* Chrome, Safari, Opera */
            -moz-columns: auto 1; /* Firefox */
            columns: auto 1;
        }
    }

Answer 1

Try doing this instead of css columns try using the html columns and just style the columns using css. I think the UIGraphics will only grab the HTML structure.

<table>
  <tr>
     <td>YourStuffHere</td>
     <td>YourStuffHere</td>
  </tr>
 </table>