samples/html/OldLatin.html

<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset=utf-8>
  <meta name=viewport content='width=device-width, initial-scale=1.0, shrink-to-fit=no'>
  <title>dlx2html Samples</title>
  <meta name=author content='Daniel W. Hieber'>
  <link rel=author href=https://danielhieber.info>
  <style>.igl,.interlinear{--igl-indent:0em;--igl-horizontal-spacing:1.25em;--igl-vertical-spacing:0.25em;font-family:var(--font-unicode-serif);line-height:1.5}.igl .gl,.igl .gloss,.igl abbr,.interlinear .gl,.interlinear .gloss,.interlinear abbr{font-variant:small-caps;text-decoration:none}.igl .em,.igl .emphasis,.igl b,.igl em,.interlinear .em,.interlinear .emphasis,.interlinear b,.interlinear em{color:var(--em-color);font-weight:700}.igl .ex-header,.interlinear .ex-header{margin:0;padding:0;text-decoration:underline;text-underline-position:under;margin-block-end:var(--igl-vertical-spacing)}.igl .ex-source,.interlinear .ex-source{float:right;float:inline-end;margin:0;padding:0}.igl .ex-source::before,.interlinear .ex-source::before{content:'('}.igl .ex-source::after,.interlinear .ex-source::after{content:')'}.igl .morphemes,.igl .words,.interlinear .morphemes,.interlinear .words{display:flex;flex-flow:row wrap;list-style:none;margin:0;margin-inline-start:var(--igl-indent);padding:0}.igl .morpheme,.igl .word,.interlinear .morpheme,.interlinear .word{display:flex;flex-direction:column;margin-block-end:var(--igl-vertical-spacing);margin-block-start:var(--igl-vertical-spacing)}.igl .morpheme>*,.igl .word>*,.interlinear .morpheme>*,.interlinear .word>*{margin:0;padding:0}.igl .morpheme+.morpheme,.igl .word+.word,.igl li+li,.interlinear .morpheme+.morpheme,.interlinear .word+.word,.interlinear li+li{margin-inline-start:var(--igl-horizontal-spacing)}.igl .transcription,.igl .txn,.interlinear .transcription,.interlinear .txn{--txn-padding:0.15em;font-family:var(--font-unicode-serif);margin:0;padding:0}.igl .transcription .em,.igl .transcription .emphasis,.igl .transcription b,.igl .transcription em,.igl .txn .em,.igl .txn .emphasis,.igl .txn b,.igl .txn em,.interlinear .transcription .em,.interlinear .transcription .emphasis,.interlinear .transcription b,.interlinear .transcription em,.interlinear .txn .em,.interlinear .txn .emphasis,.interlinear .txn b,.interlinear .txn em{color:var(--em-color);font-weight:700}.igl .tln,.igl .translation,.interlinear .tln,.interlinear .translation{quotes:'‘' '’' '“' '”';margin:0;padding:0}.igl .tln::before,.igl .translation::before,.interlinear .tln::before,.interlinear .translation::before{content:open-quote}.igl .tln::after,.igl .translation::after,.interlinear .tln::after,.interlinear .translation::after{content:close-quote}
.ex,.example{display:flow-root;font-family:var(--font-unicode-serif);line-height:1.5}.ex .em,.ex .emphasis,.ex b,.ex em,.example .em,.example .emphasis,.example b,.example em{color:var(--em-color);font-weight:700}.ex-header{margin:0;padding:0;text-decoration:underline;text-underline-position:under}.ex-source{float:right;float:inline-end;margin:0;padding:0}.ex-source::before{content:'('}.ex-source::after{content:')'}
.examples,.exs{--example-indent:1.5em;font-family:var(--font-unicode-serif);list-style-type:none;margin:0;padding:0}.examples .ex-header,.exs .ex-header{margin:0;padding:0;text-decoration:underline;text-underline-position:under}.examples .ex-source,.exs .ex-source{float:right;float:inline-end;margin:0;padding:0}.examples .ex-source::before,.exs .ex-source::before{content:'('}.examples .ex-source::after,.exs .ex-source::after{content:')'}.examples .em,.examples .emphasis,.examples b,.examples em,.exs .em,.exs .emphasis,.exs b,.exs em{color:var(--em-color);font-weight:700}.examples .ex,.examples .example,.exs .ex,.exs .example{display:flow-root;font-family:var(--font-unicode-serif);line-height:1.5;counter-increment:examples;margin-block-end:1em;margin-inline-start:var(--example-indent);position:relative}.examples .ex .em,.examples .ex .emphasis,.examples .ex b,.examples .ex em,.examples .example .em,.examples .example .emphasis,.examples .example b,.examples .example em,.exs .ex .em,.exs .ex .emphasis,.exs .ex b,.exs .ex em,.exs .example .em,.exs .example .emphasis,.exs .example b,.exs .example em{color:var(--em-color);font-weight:700}.examples .ex::before,.examples .example::before,.exs .ex::before,.exs .example::before{content:'(' counter(examples) ')';margin-inline-start:calc(var(--example-indent) * -1);position:absolute}.examples .subexamples,.examples .subexs,.exs .subexamples,.exs .subexs{margin-inline-start:1.25em;padding:0;list-style-position:outside;list-style-type:lower-alpha}.examples .subexamples li,.examples .subexs li,.exs .subexamples li,.exs .subexs li{display:list-item}</style>
</head>
<body>
  <a href=https://developer.digitallinguistics.io/dlx2html>Back to docs</a>
  <h1>OldLatin</h1>
<ul class=examples><li class='ex igl'>
    
    <p class=trs data-ortho='prac' >iovesatdeivosqoimedmitatneitedendocosmisuircosied</p><p class=trs data-ortho='lat' >𐌉𐌏𐌅𐌄𐌔𐌀𐌕𐌃𐌄𐌉𐌅𐌏𐌔𐌒𐌏𐌉𐌌𐌄𐌃𐌌𐌉𐌕𐌀𐌕𐌍𐌄𐌉𐌕𐌄𐌃𐌄𐌍𐌃𐌏𐌂𐌏𐌔𐌌𐌉𐌔V𐌉𐌓𐌂𐌏𐌔𐌉𐌄𐌃</p>
    
    
    
    <p class=tln lang='lat'>Iurat deos qui me mittit, ni [erga te] comis virgo sit</p><p class=tln lang='eng'>The person who sends me prays to the gods, lest the girl be not kind towards thee</p>
    
    
    
  </li></ul>
</body>
</html>