0

I'm working on a WPF application with VS2015 and C#.

In that application i have a function which converts a HTML to a PDF with NReco PdfGenerator.

In my PDF i got some labels which text can be aligned horizontally and vertically.

Horizontal alignment was not problem, i made it p.e. with "text-align: center" content which is horizontally centered.

But now my customer wanted vertical alignment in the labels too, so i solved the alignment by the help of flexbox.

Per example:

"display: flex; justify-content: center; align-items: center;"

This means the text of the label will be centered horizontally and vertically.

Unfortunately the NReco PdfGenerator don't work with that.

In the PDF the text is positioned left and top.

Here the HTML i'm using and please don't wonder about position:absolute.

It's like it is.

<!DOCTYPE html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
 <style>
  body { font-size: 12pt; font-family: Arial, Helvetica, sans-serif; }
  input, textarea, select, div { position: absolute;  z-index: 80; padding: 0; margin: 0; border: 0; }
  label { position: absolute; }
  input, textarea, select { background-color: lightgrey; }
  .field_function_1, .field_function_2 { border: 0pt dashed green; width: 100%; }
  .field_function_3, .field_function_4, .field_function_5, .field_function_6 { border: 1pt dashed grey; width: 100%; }
 </style>
</head>
<body>
 <div class='protocolCointainer' style='border: 0pt solid pink; page-break-after: always; position: relative;'>
  <div id="content" style="border: 1pt solid red; height: 255mm; width: 181mm; position: relative; top: 17mm;">
   <div style="top:10pt; height:270pt; page-break-inside:avoid;" class="field_function_1">
    <label id="39048" name="Alignment_Top" style="top:10pt; left:10pt;display: flex; justify-content: flex-start; align-items: flex-start; border-left:thin solid; border-top:thin solid; border-right:thin solid; border-bottom:thin solid; height:40pt; width:140pt; overflow:hidden; font-weight: bold;" iniLang ="true" textKey="InputField_Vertical_Test_RTB_1">Alignment&nbsp;Top</label>
    <label id="39049" name="Alignment_Center" style="top:60pt; left:10pt;display: flex; justify-content: center; flex-direction: row; align-items: center; border-left:thin solid; border-top:thin solid; border-right:thin solid; border-bottom:thin solid; height:40pt; width:140pt; overflow:hidden; font-weight: bold;" iniLang ="true" textKey="InputField_Vertical_Test_RTB_2">Alignment&nbsp;Center</label>
    <label id="39050" name="Alignment_Bottom" style="top:110pt; left:10pt;display: flex; justify-content: flex-end; align-items: flex-end; border-left:thin solid; border-top:thin solid; border-right:thin solid; border-bottom:thin solid; height:40pt; width:140pt; overflow:hidden; font-weight: bold;" iniLang ="true" textKey="InputField_Vertical_Test_RTB_3">Alignment&nbsp;Bottom</label>
    <input id="39052" name="NUM_1" type="text" maxlength="7" placeholder="___,__" title="Please use format ###,##" pattern="^[\+|-]?\d{1,3}([\.|,]\d{1,2})?$" style="top:160pt; left:10pt;display: flex; justify-content: flex-start; align-items: flex-start; height:20pt; width:100pt;" />
    <textarea id="39053" name="TXB_1" style="top:190pt; left:10pt;display: flex; justify-content: flex-start; align-items: flex-start; height:40pt; width:140pt; resize:none;"></textarea>
    <select id="39054" name="DDL_1" style="top:240pt; left:10pt;display: flex; justify-content: flex-start; align-items: flex-start; height:20pt; width:100pt;"></select>
   </div>
  </div>
 </div>
</body>
</html>
Patrick Pirzer
  • 1,649
  • 3
  • 22
  • 49
  • PDF generators often don't support all css. You can try with `display:table;` and `display:table-cell;` since most generators seem to support those. – Brainfeeder Apr 23 '18 at 11:42
  • @Brainfeeder: Thank You. Meanwhile i've get a response from NReco, that the PdfGenerator don't work with display:flex. – Patrick Pirzer Apr 23 '18 at 12:47

1 Answers1

0

I think the problem may be that flex isn't supported in PDF yet? There are great ways to vertical align the text though. https://css-tricks.com/centering-css-complete-guide/ covers all of them i think :)

Freddie
  • 736
  • 5
  • 16
  • Yes that's right. NReco PdfGenerator don't support at this point of time display:flex. But i can make vertical centered alignment with "line-height" and give it the same height the label has. And in case of vertical top alignment i don't need the style because top is the default. Thank You for the link. It's a very good guide in cases like that. – Patrick Pirzer Apr 23 '18 at 12:52