Einschränkungen DevExpress Html

Bei der Konvertierung von Html/CSS in ein Word-Dokument werden nicht alle Möglichkeiten von Html/CSS unterstützt. Eine Auflistung der unterstützten Elemente ist auf den Seiten von DevExpress zu finden. Allerdings funktionieren nach unserer Erfahrung nicht alle dort beschriebenen Möglichkeiten. Nachfolgend sind daher eigene Erkenntnisse dokumentiert.

Rahmen und Trennlinien

Rahmen per CSS-Border werden scheinbar nur an wenigen Elementen unterstützt. Als wichtigstes Hilfsmittel fungiert hier die Tabelle.

<table style="border-left: 1px solid red;font-size: 13pt;">
	<tr>
		<td style="padding-left: 10px;font-weight: bold;">
			<div>
				<br/>Landesamt für Bergbau,</br>
				Geologie und Rohstoffe
			</div>
		</td>
	</tr>
</table>

Ergebnis:

HR-Element als Trennstrich

Wird nach unseren Tests nur minimal unterstützt. Wenn man nur einen einfachen schwarzen Trennstrich braucht, erreicht man das mit:

<hr size="1">

Ergebnis:

Aber schon die Einstellung der Farbe hat bei uns nicht funktioniert. Das konnten wir nur mit einer Tabelle (siehe oben) erreichen.

Rahmen an einem DIV

... scheint nicht zu gehen.

Bilder (img-Tag)

Bilder, welche per EXIF-Daten als zu drehen markiert sind, werden von DevExpress zwar korrekt gedreht, die CSS-Eigenschaften width und height am img-Tag werden allerdings dann vertauscht interpretiert (Stand DevExpress 24.1).

Bisheriger Workaround ist, die Bilder bereits vom Server korrekt gedreht auszugeben:

using MemoryStream ms = new MemoryStream(bytes);
using (Image bitmap = Image.FromStream(ms))
{
	return Convert.ToBase64String(bitmap.CorrectRotationUsingExifGetBytesInSameFormat());
}

Scriban-Tipps

Literale

Bei Zuweisung eines Literals als String, welcher Html enthält, muss man die doppelten Hochkommata nicht maskieren, wenn man für das Scriban-Literal einfache Hochkommata verwendet:

testVari = '<div style="color:red">Test</div>';

Scriban unterstützt 'interpolated strings':

testVari = $"this is an interpolated string with an expression {1 + 2} and a substring {"Hello"}"

globale Definition

Überschreibung der Styles global:

$BehoerdeData.AdditionalStyles = '
     body {
      font-family: Arial Narrow;
     }
';

Seitenränder

#Seitenrand Links
	MarginLeft: 2.5,
#Seitenrand Rechts
	MarginRight: 2,
#Seitenrand Oben
	MarginTop: 5,
#Seitenrand Unten
	MarginBottom: 2,