Text won't align right when output to xhtml

English
,
#1

If I create a paragraph or table cell with content aligned right it is not reflected correctly in the html output.

To illustrate, here’s a simple document with one paragraph that is aligned right in writer, but in html is given left alignment.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><!--This file was converted to xhtml by LibreOffice - see https://cgit.freedesktop.org/libreoffice/core/tree/filter/source/xslt for the code.--><head profile="http://dublincore.org/documents/dcmi-terms/"><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/><title xml:lang="en-US">- no title specified</title><meta name="DCTERMS.title" content="" xml:lang="en-US"/><meta name="DCTERMS.language" content="en-US" scheme="DCTERMS.RFC4646"/><meta name="DCTERMS.source" content="http://xml.openoffice.org/odf2xhtml"/><meta name="DCTERMS.issued" content="2022-08-12T15:55:52.672138273" scheme="DCTERMS.W3CDTF"/><meta name="DCTERMS.modified" content="2022-08-12T15:56:18.602828935" scheme="DCTERMS.W3CDTF"/><meta name="xsl:vendor" content="libxslt"/><link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" hreflang="en"/><link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" hreflang="en"/><link rel="schema.DCTYPE" href="http://purl.org/dc/dcmitype/" hreflang="en"/><link rel="schema.DCAM" href="http://purl.org/dc/dcam/" hreflang="en"/><style>
    table { border-collapse:collapse; border-spacing:0; empty-cells:show }
    td, th { vertical-align:top; font-size:12pt;}
    h1, h2, h3, h4, h5, h6 { clear:both;}
    ol, ul { margin:0; padding:0;}
    li { list-style: none; margin:0; padding:0;}
    span.footnodeNumber { padding-right:1em; }
    span.annotation_style_by_filter { font-size:95%; font-family:Arial; background-color:#fff000;  margin:0; border:0; padding:0;  }
    span.heading_numbering { margin-right: 0.8rem; }* { margin:0;}
    .P1 { font-size:12pt; font-family:'Liberation Serif'; writing-mode:horizontal-tb; direction:ltr;text-align:left ! important; }
    /* ODF styles with no properties representable as CSS:
     { } */
</style></head>

<body dir="ltr" style="max-width:21.001cm;margin-top:2cm; margin-bottom:2cm; margin-left:2cm; margin-right:2cm; ">

<p class="P1">This is aligned right</p>

</body></html>

As you can see, its given class P1, which has text-align:left and is even marked !important.

#2

Without the original Writer file, we can’t tell anything except some paragraph style with internal name P1 was created and used. For better help, edit your question to attach the original file and mention OS name and LO version.

#3

Editing style properties to make (alignment) be ‘Right to Left’ instead of ‘Use Main Object Settings’ would produce RTL paragraph, when exporting a .odt into .html.

It seems that Writer uses “LTR” for “Main Object” in RTL documents.

These are two simple one-paragraph files having a difference only in the alignment property in their styles (Both files have body dir=“rtl”): one with ‘Use Main Object Settings’ and the other with ‘Right to Left’.
When exporting into (x)html, the first will be rendered ‘Left to Right’:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<!--This file was converted to xhtml by LibreOffice - see https://cgit.freedesktop.org/libreoffice/core/tree/filter/source/xslt for the code.-->

<head profile="http://dublincore.org/documents/dcmi-terms/">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<title xml:lang="en-US">- no title specified</title>
<meta name="DCTERMS.title" content="" xml:lang="en-US"/>

<meta name="DCTERMS.language" content="en-US" scheme="DCTERMS.RFC4646"/>
<meta name="DCTERMS.source" content="http://xml.openoffice.org/odf2xhtml"/>
<meta name="DCTERMS.creator" content="Am J"/>
<meta name="DCTERMS.issued" content="2024-04-13T22:16:22.507000000" scheme="DCTERMS.W3CDTF"/>
<meta name="DCTERMS.contributor" content="Am J"/>
<meta name="DCTERMS.modified" content="2024-04-13T23:29:58.062000000" scheme="DCTERMS.W3CDTF"/>


<meta name="xsl:vendor" content="libxslt"/>
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" hreflang="en"/>
<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" hreflang="en"/>
<link rel="schema.DCTYPE" href="http://purl.org/dc/dcmitype/" hreflang="en"/>
<link rel="schema.DCAM" href="http://purl.org/dc/dcam/" hreflang="en"/>

<style>
    table { border-collapse:collapse; border-spacing:0; empty-cells:show }
    td, th { vertical-align:top; font-size:12pt;}
    h1, h2, h3, h4, h5, h6 { clear:both;}
    ol, ul { margin:0; padding:0;}
    li { list-style: none; margin:0; padding:0;}
    span.footnodeNumber { padding-right:1em; }
    span.annotation_style_by_filter { font-size:95%; font-family:Arial; background-color:#fff000;  margin:0; border:0; padding:0;  }
    span.heading_numbering { margin-right: 0.8rem; }* { margin:0;}
    .paragraph-P1{ font-size:12pt; text-align:left ! important; font-family:Calibri; writing-mode:horizontal-tb; direction:ltr;}
    .paragraph-Title{ font-size:28pt; margin-bottom:0.212cm; margin-top:0.423cm; text-align:center ! important; font-family:'Liberation Sans'; writing-mode:horizontal-tb; direction:ltr;font-weight:bold; }
    /* ODF styles with no properties representable as CSS:
    .dp1  { } */
</style>
</head>

<body dir="rtl" style="max-width:21.001cm;margin-top:2cm; margin-bottom:2cm; margin-left:2cm; margin-right:2cm; ">

<p class="paragraph-Title">معايير</p>

<p class="paragraph-P1">نحاول هنا إدراج عدّة معايير تتحكّم في نوعية الإنتاج المطلوب تحقيقه في الخطة الخمسية. لتبسيط النتائج المتوقعة، سنقلل المعطيات إلى الحدّ الأدنى.</p>
</body>

</html>

While the second will have correct ‘Right to Left’ rendering:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<!--This file was converted to xhtml by LibreOffice - see https://cgit.freedesktop.org/libreoffice/core/tree/filter/source/xslt for the code.-->

<head profile="http://dublincore.org/documents/dcmi-terms/">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<title xml:lang="en-US">- no title specified</title>
<meta name="DCTERMS.title" content="" xml:lang="en-US"/>

<meta name="DCTERMS.language" content="en-US" scheme="DCTERMS.RFC4646"/>
<meta name="DCTERMS.source" content="http://xml.openoffice.org/odf2xhtml"/>
<meta name="DCTERMS.creator" content="Am J"/>
<meta name="DCTERMS.issued" content="2024-04-13T22:16:22.507000000" scheme="DCTERMS.W3CDTF"/>
<meta name="DCTERMS.contributor" content="Am J"/>
<meta name="DCTERMS.modified" content="2024-04-13T23:30:28.660000000" scheme="DCTERMS.W3CDTF"/>


<meta name="xsl:vendor" content="libxslt"/>
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" hreflang="en"/>
<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" hreflang="en"/>
<link rel="schema.DCTYPE" href="http://purl.org/dc/dcmitype/" hreflang="en"/>
<link rel="schema.DCAM" href="http://purl.org/dc/dcam/" hreflang="en"/>

<style>
    table { border-collapse:collapse; border-spacing:0; empty-cells:show }
    td, th { vertical-align:top; font-size:12pt;}
    h1, h2, h3, h4, h5, h6 { clear:both;}
    ol, ul { margin:0; padding:0;}
    li { list-style: none; margin:0; padding:0;}
    span.footnodeNumber { padding-right:1em; }
    span.annotation_style_by_filter { font-size:95%; font-family:Arial; background-color:#fff000;  margin:0; border:0; padding:0;  }
    span.heading_numbering { margin-right: 0.8rem; }* { margin:0;}
    .paragraph-P1{ font-size:12pt; text-align:right ! important;font-family:Calibri; writing-mode:horizontal-tb; direction:rtl; }
    .paragraph-Title{ font-size:28pt; margin-bottom:0.212cm; margin-top:0.423cm; text-align:center ! important; font-family:'Liberation Sans'; writing-mode:horizontal-tb; direction:rtl; font-weight:bold; }
    /* ODF styles with no properties representable as CSS:
    .dp1  { } */
</style>
</head>

<body dir="rtl" style="max-width:21.001cm;margin-top:2cm; margin-bottom:2cm; margin-left:2cm; margin-right:2cm; ">

<p class="paragraph-Title">معايير</p>

<p class="paragraph-P1">نحاول هنا إدراج عدّة معايير تتحكّم في نوعية الإنتاج المطلوب تحقيقه في الخطة الخمسية. لتبسيط النتائج المتوقعة، سنقلل المعطيات إلى الحدّ الأدنى.</p>
</body>

</html>

paragraph_alignmentRTL.odt (12.5 KB)
paragraph_alignmentMainObject.odt (12.5 KB)

#4

How do you “export to (x)html”? Which menu do you use?
With File>Send>Create HTML, both your file display RTL, but your title is not centered.

#5

File > Export (Save as type: XHTML)

#6

This creates a representation of the structure of your text but formatting is not transferred. Open the output file with a text editor and you’ll see that no stylesheet is associated with it.

My experiment (with your sample files) was done with LO 7.6.6.3 under Fedora 39 with KDE Plasma desktop. As you’ll find, the file is XML but not HTML at all.
paragraph_alignmentRTL.xhtml.odt (444 Bytes)
(remove .odt from the filename to be able to open it; this is only a spoofing trick against the Discourse engine of this site).

What exactly have you done to get a sensible XHTML? I need to go through File>Send>…

Impressum (Legal Info) | Datenschutzerklärung (Privacy Policy)   Content on this site is licensed under a Creative Commons Attribution Share Alike 3.0 license.