I have this html-code generated from a xml-file which is generated from latex code and I can't change the html output. I work on an indological edition of an anient yoga text. I not just want to have a nice latex document for printing my edition. I want to also have a web edition simultanously. So my lualatex code is processed putting out an xml-file which a xslt2 processor processes to an html file. This is the html:
@font-face {
font-family: LinuxLibertineDisplay0Regular, times, serif;
src: url(fonts/LinLibertine_DR.woff);
}
/* {box-sizing: border-box;}*/
/*body {background-color: #FFFFFF; font-family: 'LinuxLibertineDisplayORegular'; font-weight: normal; font-style: normal; font-size: 18px; padding: 20px 100px 20px; width: 1600px;}*/
body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: row dense;
grid-gap: 0.5rem;
}
h1 {
grid-column-start: 1;
grid-column-end: none;
}
.edition,
.translation {
display: inherit;
grid-template-rows: 1fr 1fr;
grid-auto-rows: 1fr;
row-gap: 10px
}
.edition {
grid-column-start: 1;
}
.translation {
grid-column-start: 2;
}
.edition > div[type="ed"] {
background-color: #def;
padding: 0.5rem;
}
.translation > div[type="trans"] {
background-color: #abc;
padding: 0.5rem;
}
ul {list-style: circle;}
ul.dash {list-style: none; margin-left: .5em; padding-left: .5em;}
ul.dash > li:before {display: inline-block; content: "–"; width: 1em; margin-left: 0em;}
a:link {color: black; text-decoration: underline;}
a:visited {color: black; text-decoration: underline;}
a:hover {color: black; text-decoration: none;}
a:active {color: black; text-decoration: underline;}
p {padding-left: .5em; padding-right: .5em;}
h4 {margin-bottom: 0px;}
mark {background-color: #FFFFCC;}
q:before {content: "»";}
q:after {content: "«";}
.noindent {padding: 0px;}
.comm {padding-left: 1em; padding-right: 1em;}
.app {width: 80%; text-align: left; font-size: 10px; padding-left: 1em;}
.lem {display:inline-block;}
.ref {font-size: 14px; padding: inherit;}
.lb {font-weight: bold; font-size: 14px;}
.lb:before {content: "["}
.lb:after {content: "]"}
.pb {font-weight: bold; font-size: 14px;}
.pb:before {content: " ["}
.pb:after {content: "] "}
.note {font-weight: bold; font-size: 14px;}
.note:before {content: " ["}
.note:after {content: "] "}
.subhead {font-weight: bold; font-size: 14px;}
.appnote {font-size: 14px;}
.appnote:before {content: " ["}
.appnote:after {content: "] "}
.hi {font-style: italic}
.sic:before {content: "†"}
.sic:after {content: "†"}
.corr {color: #008000;}
.supplied {color: #1E90FF;}
.surplus {color: #ff3333;}
.unclear {color: #D2B48C;}
/* custom renditions */
.b, .bf, .textbf, .bold {font-weight: bold}
.i, .it, .textit, .italic {font-style: italic}
.u, .underline {text-decoration: underline}
.blue {color: #0000e6;}
.red {color: #b30000;}
.row:after {content: ""; display: table; clear: both;}
.column {float: left; width: 50%; padding-left: .5em; padding-right: .5em;}
.analysis {font-size: 14px; color: #0066ff; padding-left: .5em; padding-right: .5em; padding-top: .1em;}
.analysis:before {content: "["}
.analysis:after {content: "]"}
div.wapp:hover span.lem {background-color: #FFFFCC;}
@media screen and (max-width: 800px) {
body {font-size: 16px;}
.column {width: 100%;}
.analysis {width: 100%;}
}
@media screen and (max-width: 1200px) {
body {padding: 10px;}
.app {width: 90%;}
}
@media only screen and (max-width: 1600px) {
body {width: auto; padding: 20px;}
}
#toc_container {background: #f9f9f9 none repeat scroll 0 0; border: 1px solid #aaa; display: table; font-size: 95%; margin-bottom: 1em; padding: 1em; width: auto;}
.toc_title {font-weight: 700; text-align: center;}
#toc_container li, #toc_container ul, #toc_container ul li{list-style: outside none none !important; padding-left: .5em;}
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<h1></h1>
<div xmlns="http://www.tei-c.org/ns/1.0" xml:id="div-edition_1" class="edition">
<div type="ed">
<h3 xmlns="http://www.w3.org/1999/xhtml">Maṅgala statement</h3>
<centerline>
<textrm><small>[Introduction]</small></textrm>
</centerline>
<div xmlns="http://www.w3.org/1999/xhtml" class="wapp">
<p> <mark>śrī gaṇeśāya namaḥ</mark> // <mark>atha rājayogaprakāro likhyate</mark> // </p>
<div class="app"><span class="lem">śrī gaṇeśāya namaḥ (<a href="#E" title="E Printed Edition">E</a> <a href="#L" title="L LALCHAND 5876">L</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a> <a href="#U2" title="U2 SORI 6082">U2</a>) ]</span> śrī ṇe ya maḥ (<a href="#P" title="P Pune BORI 664">P</a>), śrī gurave namaḥ (<a href="#N1" title="N1 NGMPP 38/31">N1</a>), śrī sarasvatyai namaḥ śrī nirañjanāya namaḥ (<a href="#D1" title="D1 IGNCA 30019">D1</a>), oṃ śrī niraṃjanāya (<a href="#U1" title="U1 SORI 1574">U1</a>)</div>
<div class="app"><span class="lem">atha rājayogaprakāro likhyate (<a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a>) ]</span> atha rājayogaprakāra likhyate (<a href="#U1" title="U1 SORI 1574">U1</a>), rājayogāntargataḥ / binduyogaḥ (<a href="#E" title="E Printed Edition">E</a>), atha tattvabiṃduyogaprāraṃbhaḥ (<a href="#L" title="L LALCHAND 5876">L</a>), atha rājayoga liṣyate (<a href="#P" title="P Pune BORI 664">P</a>), atha rājayoga likhyate (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
</div>
</div>
<div type="ed">
<h3 xmlns="http://www.w3.org/1999/xhtml">Intro</h3>
<div xmlns="http://www.w3.org/1999/xhtml" class="wapp">
<p> rājayogasyedaṃ phalaṃ / yena rājayogenānekarājyabhogasamaya eva / anekapārthivavinoda<mark>prekṣaṇasamaya</mark> eva / bahutarakālaṃ śarīrasthitirbhavati / sa <mark>eva</mark> rājayogaḥ / tasyaite bhedāḥ / </p>
<div class="app"><span class="lem">prekṣaṇasamaya (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a>) ]</span> prekṣyaṇasamaya (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
<div class="app"><span class="lem">eva (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U2" title="U2 SORI 6082">U2</a>) ]</span> evaṃ (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
</div>
</div>
<div type="ed">
<h3 xmlns="http://www.w3.org/1999/xhtml">The 15 Yogas</h3>
<div xmlns="http://www.w3.org/1999/xhtml" class="row">
<div class="column">
<div class="wapp">
<p>kriyāyogaḥ / jñānayogaḥ / <mark>cāryayogaḥ</mark> / haṭhayogaḥ / karmayogaḥ / <mark>layayogaḥ</mark> / dhyānayogaḥ / mantrayogaḥ / <mark>lakṣyayogaḥ</mark> / vāsanāyogaḥ / śivayogaḥ / brahmayogaḥ / advaitayogaḥ / <mark>siddhayogaḥ / rājayogaḥ</mark> / <mark>ete pañcadaśayogāḥ</mark> //</p>
<div class="app"><span class="lem">cāryayogaḥ (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U2" title="U2 SORI 6082">U2</a>) ]</span> tvaryāyogaḥ (<a href="#U1" title="U1 SORI 1574">U1</a>)</div>
<div class="app"><span class="lem">layayogaḥ (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a>) ]</span> nayayogaḥ (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
<div class="app"><span class="lem">lakṣyayogaḥ (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U2" title="U2 SORI 6082">U2</a>) ]</span> lakṣayogaḥ (<a href="#U1" title="U1 SORI 1574">U1</a>)</div>
<div class="app"><span class="lem">siddhayogaḥ / rājayogaḥ (<a href="#P" title="P Pune BORI 664">P</a> <a href="#U2" title="U2 SORI 6082">U2</a>) ]</span> rājayogaḥ / siddhayogaḥ (<a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a>)</div>
<div class="app"><span class="lem">ete pañcadaśayogāḥ (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a>) ]</span> evaṃ paṃcadaśāyogā bhavaṃti (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
</div>
</div>
<div class="column">
<p class="analysis">The initial codification of 15 yogas appears in N1,P,D1,U1 and U2. It is ommitted
in E and L. B can't be determined due to missing folios. P is the only witness which
numbers the yogas with devanāgarī-digits. The other witnesses separate the list with
single or double daṇḍas.</p>
</div>
</div>
</div>
<div type="ed">
<h3 xmlns="http://www.w3.org/1999/xhtml">Kriyāyoga</h3>
<centerline>
<textrm><small>[Description of <span xmlns="http://www.w3.org/1999/xhtml" class="italic">kriyāyoga</span>]</small></textrm>
</centerline>
<div xmlns="http://www.w3.org/1999/xhtml" class="wapp">
<p><mark>idānīṃ</mark> <mark>kriyāyogasya</mark> lakṣaṇaṃ <mark>kathyate</mark>/</p>
<div class="app"><span class="lem">idānīṃ (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a>) ]</span> atha (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
<div class="app"><span class="lem">kriyāyogasya (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a>) ]</span> kriyāyogas (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
<div class="app"><span class="lem">kathyate (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#U1" title="U1 SORI 1574">U1</a>) ]</span> kathayate (<a href="#D1" title="D1 IGNCA 30019">D1</a>), \om (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
</div>
</div>
</div>
<div xmlns="http://www.tei-c.org/ns/1.0" xml:id="div-translation_1" class="translation">
<div type="trans">
<h3 xmlns="http://www.w3.org/1999/xhtml">Maṅgala statement</h3>
<centerline>
<textrm><small>[Introduction]</small></textrm>
</centerline>
<p xmlns="http://www.w3.org/1999/xhtml">Homage to Śrī Gaṇeśa. Now the methods of rājayoga are laid down. </p>
</div>
<div type="trans">
<h3 xmlns="http://www.w3.org/1999/xhtml">Intro</h3>
<p xmlns="http://www.w3.org/1999/xhtml">This is the result of <span class="italic">rājayoga</span><span class="note">This statement seems unconnected to the definition of rājayoga that follows.</span>: <span class="italic">Rājayoga</span> is that by which longterm durability of the body arises even amongst manifold royal
pleasures even amongst the manifold royal entertainments and spectacle. This truly
is <span class="italic">rājayoga</span>. Of this [<span class="italic">rājayoga</span>] these are the varieties: </p>
</div>
<div type="trans">
<h3 xmlns="http://www.w3.org/1999/xhtml">The 15 Yogas</h3>
<p xmlns="http://www.w3.org/1999/xhtml">1. Yoga of [mental] action (<span class="italic">kriyāyoga</span>), 2. Yoga of knowledge (<span class="italic">jñānayoga</span>), 3. Yoga of wandering (<span class="italic">caryāyoga</span>), 4. Yoga of force (<span class="italic">haṭhayoga</span>), 5. Yoga of deeds (<span class="italic">karmayoga</span>), 6. Yoga of absorption (<span class="italic">layayoga</span>), 7. Yoga of meditation (<span class="italic">dhyānayoga</span>), 8. Yoga of mantras (<span class="italic">mantrayoga</span>), 9. Yoga of fixation objects (<span class="italic">lakṣyayoga</span>), 10. Yoga of mental residues (<span class="italic">vāsanāyoga</span>), 11. Yoga of Śiva (<span class="italic">śivayoga</span>), 12. Yoga of Brahman (<span class="italic">brahmayoga</span>), 13. Yoga of non-duality (<span class="italic">advaitayoga</span>), 14. Yoga of completion (<span class="italic">siddhayoga</span>) 15. Yoga of kings (<span class="italic">rājayoga</span>). These are the fifteen <span class="italic">yoga</span>s.<span class="note">At the current stage of research it is not clear if this list is a later addition
by another scribe or, if indeed it originally stems from Rāmacandra. The list suggests
a text following the order of yogas according to this list. However, the order and
even the designation of some of the yogas given in the list is just followed very
loosely in the text.</span></p>
</div>
<div type="trans">
<h3 xmlns="http://www.w3.org/1999/xhtml">Kriyāyoga</h3>
<centerline>
<textrm><small>[Description of <span xmlns="http://www.w3.org/1999/xhtml" class="italic">kriyāyoga</span>]</small></textrm>
</centerline>
<p xmlns="http://www.w3.org/1999/xhtml">Now the characteristic of the Yoga of [mental] action (<span class="italic">kriyāyoga</span>) described.</p>
</div>
</div>
</body>
</html>
I would like to display the html using css in two columns with infinite rows as my edition and the translation goes. The first row is supposed to display the translation and the following row is supposed to display the respective translation.
This should continuously be in alignment.
I can't change the html too mucg. I have to do it by applying css. So I think it is a good idea to access by choosing the div markup which has n=1 and n=2.
Edition part 1 is marked by type="ed" and should go into first column first row. Translation of part 1 it is marked by type="trans" and should go into second column first row. Edition part 2 is marked by type="ed" and should go into first column second row. Translation of part 2 is marked by type="trans" and should go into second column second row.
And potentially so on and so forth.
But somehow I can't figure it out. I am sitting here since 9 hours and it does not work.
Can you please help me?
Thank you and best wishes, enjotel
...................
