Search code examples
htmlcssnreco

How to align text in HTML label vertical for NReco PdfGenerator

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>

Solution

  • 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 :)