iOSでPDFとして表示されたときに、中央揃えのテキストを含むボトムテーブルのセルが切り取られるのはなぜですか？

質問iOSでPDFとして表示されたときに、中央揃えのテキストを含むボトムテーブルのセルが切り取られるのはなぜですか？

私は、htmlファイルを取り、PDFに変換します、そしてWebKitのウェブビューに表示するiOSアプリを持っています。私はPDFに表示すると、下の表のセルが途切れてしまう不思議な問題があります。奇妙なことは、テキストが中央に置かれている場合にのみ、下の表が切り取られることです。左揃えの場合、すべて正常に動作します。なぜこれが起こるのですか？

解決策を探しているわけではありません。むしろ、なぜこれが起こるのか理解しようとしています。これはiOSのバグですか？それとも私は何かが恋しい？下の画像で

概要

、二つのテーブル<table>があります。 1つのテーブルは大きく、赤い珊瑚の背景を持ち、高さは505ピクセルです。もう一方のテーブルは、白い背景（高さは設定されていません）の最初のものの下にあります。どちらもテキストがあります。テキストは両方のテーブルの中央に配置されます。

ナビゲーションバーのタイトルには、現在のビューの詳細が表示されます。たとえば、下の図に示すように、タイトルがの場合、PDFランドスケープ505は、ランドスケープディメンションのビューとメインテーブルの高さが505pxのPDFを示します。

問題

私は10pxのことで、高さを上げると、問題が発生します。下の画像では、メインテーブルの高さは515pxで、下のテーブルは切り捨てられています。

左揃えするまったく同じHTMLやCSSコードを取り、テキストのみアライメントを変更します。今度は下のテーブルはもう切られません。私はまた、区別のために背景色を緑色に変更しました。緑はテキストが左揃えであることを意味します。赤は、テキストが中央に配置されていることを意味します。

次の画像は745pxのメインテーブルの高さを示し、それが左に整列されているため、さらに低いテーブルが遮断されていません。

コードの下

この試験のために使用されるHTMLコードです。 MyViewControllerで

<!DOCTYPE html> 
<html> 
<head> 
    <title>#COLOR#</title> 
    <meta charset="utf-8"> 
    <style> 
    table, th, td { 
    border-collapse: collapse; 
    border: 3px solid black; 
    text-align: #ALIGN#; 
    } 
    table.main-table { 
    width: 1012px; 
    height: #HEIGHT#px; 
    background-color: #COLOR#; 
    } 
    table.bottom-table { 
    width: 1012px; 
    } 
    </style> 
</head> 

<body> 

    <table class="main-table"> 
    <tr><td>Hello World.</td></tr> 
    </table> 
    <table class="bottom-table"> 
    <tr><td>This text gets cut off when centered. It does *not* get cut when left-aligned.</td></tr> 
    </table> 

</body> 
</html>

、getHTML()関数はsample.htmlからHTMLソースを引っ張ります。この関数は、#ALIGN#,#COLOR#、および#HEIGHT#のそれぞれの値を置き換えます。

func getHTML() -> String? { 
    let htmlPath: String? = Bundle.main.path(forResource: htmlResource, ofType: "html") 
    guard let path = htmlPath else { return nil } 
    do { 
     // Load the HTML template code into a String variable. 
     var html = try String(contentsOfFile: path) 
     html = html.replacingOccurrences(of: "#HEIGHT#", with: tableHeight.description) 
     html = html.replacingOccurrences(of: "#COLOR#", with: colorState.rawValue) 
     html = html.replacingOccurrences(of: "#ALIGN#", with: alignState.rawValue) 
     return html 
    } catch { 
     print("Error: " + error.localizedDescription) 
    } 
    return nil 
}

PDFBuilderクラスは一つの機能を持つPDFの作成を処理します。

static func exportHTMLToPDF(html: String, frame: CGRect) -> Data { 
    // Set a printable frame and inset     
    let pageFrame = frame 
    let insetRect = pageFrame.insetBy(dx: 10.0, dy: 10.0) 

    // Create a UIPrintPageRenderer and set the paperRect and printableRect using above values. 
    let pageRenderer = UIPrintPageRenderer() 
    pageRenderer.setValue(pageFrame, forKey: "paperRect") 
    pageRenderer.setValue(insetRect, forKey: "printableRect") 

    // Create a printFormatter and pass the HTML code as a string. 
    let printFormatter = UIMarkupTextPrintFormatter(markupText: html) 

    // Add the printFormatter to the pageRenderer 
    pageRenderer.addPrintFormatter(printFormatter, startingAtPageAt: 0) 

    // This data var is where the PDF will be stored once created. 
    let data = NSMutableData() 

    // This is where the PDF gets drawn. 
    UIGraphicsBeginPDFContextToData(data, pageFrame, nil) 
    UIGraphicsBeginPDFPage() 
    pageRenderer.drawPage(at: 0, in: UIGraphicsGetPDFContextBounds()) 
    print("bounds: " + UIGraphicsGetPDFContextBounds().debugDescription)   
    UIGraphicsEndPDFContext() 

    return data as Data 
}

このプロジェクトはGitHubの上にもある：

寸法を取っ https://github.com/starkindustries/PrintPDFTest

トラブルシューティング手順s：PDFサイズのサイズで遊んでみました。これは結果に違いをもたらさなかった。

カラム：1つではなく複数のカラムを使用しました。同じ問題。変わりはない。

テーブル：2つではなく1つのテーブルを使用してみました。 1つのテーブルと2つのセルを使用すると、テキストが中央に配置されている場合でも下のセルは切り取られます。テキストを左揃えにすると、下のセルは切り取られません。

iPhone：さまざまなiPhoneデバイス（iPhone 6s、iPhone 8、iPad Pro）でシミュレーションを試みました。同じ問題。

Div：2番目のテーブルの代わりにdivを使用すると、問題は魔法のように修正されます。しかし、なぜdivは仕事でテーブルではないのですか？緑と赤：

アプリケーションノート

上部のツールバーには、2つのボタンがあります。緑はテキストを左揃えにします。赤はテキストを中央にします。 巻き戻し、HTML、肖像、風景、および早送り：

下のツールバーには、5つのボタンがあります。 巻き戻しボタンを押すと、メインテーブルの高さが10px減少します。 早送りは、高さを10ピクセル増加させます。 htmlボタンはhtmlビューを表示します。 ポートレートおよびランドスケープそれぞれの方向をPDFで示します。

出典

2017-12-05 Zion Perez

質問に重要なHTMLやCSSがありますか？ここには謎がありますhttps://jsfiddle.net/sol_b/6udog328/ – sol

いいえ、私が投稿したもの以外のHTML/CSSコードはありません。完全な情報源は、あなたが確認したい、あるいは修正したい場合、githubのリンクにあります。この問題はiOSアプリで特にPDFに印刷するときに発生します。 htmlとして表示しても問題ありません。したがって、jsfiddleは条件を複製しません。 –

下の表に明示的な高さを設定しようとしましたか？ –

私は、これが問題だと思う：

table上のルールを設定する

table, th, td { 
    border-collapse: collapse; 
    border: 3px solid black; 
    text-align: #ALIGN#; 
    }

、& th, tdは（問題をレンダリングするいくつかのPDFファイルよりもtroubleshot以上有する）私にはトラブルのように見えます

text-alignではない場合、DeadLockのコメントは... border-collapseとなる可能性があります帽子はtd（私はそれがテーブルに行く必要があると思う）に適用されています。

この種のもののための別のフロントエンドのデバッグチップである：

* {border:1px solid #f00}又は* {box-shadow: inset 0 0 1px #f00}（後者は要素の割合には何も添加危険ないが、PDFビューでレンダリングされない場合があります）これらのルールであろう要素インスペクタに向かうのではなく、各編集がレイアウトに対して何をしているかを一目で確認するのに役立ちます。

また、そのdomにtable要素がどのようにレンダリングされるかをよく理解していることを確認してください。

elementとelement.classの両方のルールを宣言すると、何かを投げ捨てた可能性があります。スタイルを持たないビヘイビアと比較して、1つずつ戻します。

<!DOCTYPE html> 
<html> 
<head> 
    <title>COLOR</title> 
    <meta charset="utf-8"> 
    <style> 
    table{ 
    border-collapse: collapse; 
    } 
    th{ 

    } 
    td { 
    border-width:3px; 
    border-style:solid; 
    border-color:#000000; 
    } 
    tr{ 
    text-align: center; 
    } 
    table.main-table { 
    width: 1012px; 
    height: 515px; /* There's a lot you can do here instead of height: 515px; if needed I can elaborate. I'm guessing the content is varible-height? does flex-box make it through the pdf-generator? */ 
    background-color: #ccc; 
    } 
    table.bottom-table { 
    width: 1012px; 
    } 
    </style> 
</head> 

<body> 

    <table class="main-table"> 
    <tr><td>Hello World.</td></tr> 
    </table> 
    <table class="bottom-table"> 
    <tr><td>This text gets cut off when centered. It does *not* get cut when left-aligned.</td></tr> 
    </table> 

</body> 
</html>

その他の質問：

は、デバッガでエミュレーションでそれを調べることができ

私はあなたのコードを書き換えでショットを取りましたか？または、エラーを表示するためにpdfが出力される方法を変更できますか？

行の高さはパーセントですか？

出典

2018-01-17 04:27:52 admcfajn

iOSでPDFとして表示されたときに、中央揃えのテキストを含むボトムテーブルのセルが切り取られるのはなぜですか？

答えて

関連する問題