On Variant I would like to improve the line breaking. should go on line above. Each part of the dictionary definition is contained in a span with different class name.

.Variant_Form:before  {margin-left: 4pt; content: "Variant: "; color: black ; font-weight: normal; font-style: italic ; font-family: Times New Roman, Gentium, Georgia, serif; } 

does put a left margin on Variant but it seems to be non-breaking. How do I get it to break?



With

padding-left: 4pt ;

or

margin-left: 4pt ;

but if I allow a space before Variant I get

Jim Albright
Wycliffe Bible Translators

1. bad break.png‎ 7.8 kB
2. good break.png‎ 7.8 kB

Hmm, what does the markup look like, and what exactly is the problem?

The xml is all on one line but I broke it out for clarity:
<p>
<span class="Lemma">abis</span>
<span class="Part_Of_Speech">vi</span>
<span class="Definition_English">completely, over, finished, done</span>
<span class="Gloss_National">habis, selesai</span>
<span class="Encyclopedic_English">As a main verb, <span class=" fv">abis can be modified periphrastic causatives, etc. As the second verb in a serial construction, <span class=" fv">abis marks completive aspect on the main (preceding) verb.</span>
</span></span><span class="Example_Sentence_Vernacular">Acara di tv su abis.</span>
<span class="Example_Sentence_English">The show on TV is finished.</span>
<span class="Example_Sentence_National">Acara tv sudah selesai.</span>
<span class="Example_Sentence_Vernacular">Burung-burung dong datang ko toto bekin abis itu padi dong.</span>
<span class="Example_Sentence_English">Those birds came and ate (pecked) the rice until it was gone.</span>
<span class="Example_Sentence_National">Burung-burung itu datang, lalu memakan padi itu hingga habis. </span>
<span class="Part_Of_Speech">Cnj</span><span class="Gloss_English">after, later, afterwards</span>
<span class="Gloss_National">sesudah, setelah, kemudian</span>
<span class="Example_Sentence_Vernacular">Abis itu, dong pulang memang.</span>
<span class="Example_Sentence_English">After that, they went straight home.</span>
<span class="Example_Sentence_National">Sesudah itu, mereka langsung pulang.</span>
<span class="Example_Sentence_Vernacular">Ma abis tiga ratus taon, Balanda dong sonde pegang kuasa lai.</span>
<span class="Example_Sentence_English">But after 300 years, the Dutch did not hold power any more.</span>
<span class="Example_Sentence_National">Tetapi setelah 300 tahun, orang-orang Belanda tidak lagi memerintah di sini.</span>
<span class="Variant_Form">ais, as</span>
</p>

I generate the CSS from this program.



/* Cascading Style Sheet for dictionaries */

/* ************************************** */
/* **************** spans *************** */
/* ************************************** */

/* generated CSS 10-23-2010 11:13:42 PM */
.Borrowed_Word {margin-left: 4pt ; }
.Borrowed_Word:after {content: "."; font-weight: normal ;}
.Borrowed_Word:before {content: "Borrowed word: "; color: black ; font-weight: normal; font-style: italic ; font-family: Times New Roman, Gentium, Georgia, serif; }
.Cross_Reference {margin-left: 4pt ; font-family: Andika Basic, Comic Sans MS, arial, helvetica, sans-serif ; color: teal ; }
.Cross_Reference:before {content: "See: "; color: black ; font-weight: normal; font-style: italic ; font-family: Times New Roman, Gentium, Georgia, serif; }
.Cross_Reference_English_Gloss {margin-left: 4pt ; }
.Cross_Reference_English_Gloss:before {}
.Cross_Reference_National_Gloss {margin-left: 4pt ; color: purple ; }
.Cross_Reference_National_Gloss:before {}
.Definition_English {margin-left: 4pt ; }
.Definition_English:after {content: ";"; font-weight: normal ;}
.Definition_English:before {}
.Definition_National {margin-left: 4pt ; }
.Definition_National:after {content: "."; font-weight: normal ;}
.Definition_National:before {}
.Encyclopedic_English {margin-left: 4pt ; }
.Encyclopedic_English:before {}
.Example_Sentence_English {margin-left: 4pt ; }
.Example_Sentence_English:before {}
.Example_Sentence_National {margin-left: 4pt ; font-style: italic ; color: purple ; }
.Example_Sentence_National:before {}
.Example_Sentence_Vernacular {margin-left: 4pt ; font-family: Andika Basic, Comic Sans MS, arial, helvetica, sans-serif ; font-weight: bold ; color: navy ; }
.Example_Sentence_Vernacular:before {}
.Gloss_English {margin-left: 4pt ; }
.Gloss_English:after {content: ";"; font-weight: normal ;}
.Gloss_English:before {}
.Gloss_National {margin-left: 4pt ; font-style: italic ; color: purple ; }
.Gloss_National:after {content: "."; font-weight: normal ;}
.Gloss_National:before {}
.Homonym_Number {display: inline ; vertical-align: sub ; font-size: 60% ; }
.Homonym_Number ~ .Homonym_Number {display: run-in ; margin-left: 0pt ;}
.Homonym_Number:before {content: ""; color: black ; font-weight: normal; font-style: italic ; font-family: Times New Roman, Gentium, Georgia, serif; }
.Lemma {string-set: LemmaString content() ; font-family: Andika Basic, Comic Sans MS, arial, helvetica, sans-serif ; font-weight: bold ; }
.Main_Entry_Form {margin-left: 4pt ; font-family: Andika Basic, Comic Sans MS, arial, helvetica, sans-serif ; font-weight: bold ; color: teal ; }
.Main_Entry_Form:after {content: "."; font-weight: normal ;}
.Main_Entry_Form:before {content: "See: "; color: black ; font-weight: normal; font-style: italic ; font-family: Times New Roman, Gentium, Georgia, serif; }
.Morphemic_Representation {margin-left: 4pt ; }
.Morphemic_Representation:before {}
.Part_Of_Speech {margin-left: 4pt ; display: inline ; font-style: italic ; color: blue ; font-size: 90% ; }
.Part_Of_Speech ~ .Part_Of_Speech {display: run-in ; margin-left: 0pt ;}
.Part_Of_Speech:after {content: "."; font-weight: normal ;}
.Part_Of_Speech:before {}
.Phonetic {margin-left: 4pt ; font-family: Andika Basic, Comic Sans MS, arial, helvetica, sans-serif ; color: navy ; }
.Phonetic:after {content: "]"; font-weight: normal ;}
.Phonetic:before {content: "["; color: black ; font-weight: normal; font-style: normal ; font-family: Times New Roman, Gentium, Georgia, serif; }
.Sense_Number {margin-left: 4pt ; display: inline ; font-weight: bold ; }
.Sense_Number ~ .Sense_Number {display: run-in ; margin-left: 0pt ;}
.Sense_Number:after {content: " • "; font-weight: normal ;}
.Sense_Number:before {}
.Subentry {margin-left: 4pt ; font-family: Andika Basic, Comic Sans MS, arial, helvetica, sans-serif ; font-weight: bold ; }
.Subentry:before {}
.Usage_English {margin-left: 4pt ; }
.Usage_English:after {content: ";"; font-weight: normal ;}
.Usage_English:before {content: "Usage: "; color: black ; font-weight: normal; font-style: italic ; font-family: Times New Roman, Gentium, Georgia, serif; }
.Usage_National {margin-left: 4pt ; font-style: italic ; color: purple ; }
.Usage_National:after {content: "."; font-weight: normal ;}
.Usage_National:before {}
.Variant_Form { font-family: Andika Basic, Comic Sans MS, arial, helvetica, sans-serif ; color: navy ; }
.Variant_Form:after {content: "."; font-weight: normal ;}
.Variant_Form:before {margin-left: 4pt; content: "Variant: "; color: black ; font-weight: normal; font-style: italic ; font-family: Times New Roman, Gentium, Georgia, serif; }
.Subentry {display: run-in ; margin-left: 0pt ;}
.Subentry ~ .Part_Of_Speech {display: inline ; margin-left: 4pt; }
/* 60 lines generated */

.fv {font-family: Andika Basic, Comic Sans MS, arial, helvetica, sans-serif ; font-weight: bold ; }
.fb {font-weight: bold ; background-color: pink ; }
.fi {font-style: italic ; }

The problem is that the margin-left: 4pt acts as a non-breaking space. It keeps the preceding word with it. If I put in a space before, that works here but in a different context I don't get any space at all even though there is a space before. The context is in Gloss_English following the second Part_Of_Speech. As shown this is with the margin-left. When I remove margin-left and put in a space, no space exists between the second Part_Of_Speech and the Gloss_English.

Jim Albright
Wycliffe Bible Translators

1. dictionary css.png‎ 36.8 kB

Horizontal margins on spans do not count as break points, so if the XML is all on one line and there is no space before the "Variant:" then there is no space between the "sini." and the "Variant:", resulting in one word "sini.Variant:" that happens to have some margin in the middle. Is there any reason why you can't put space before it, eg. " Variant: "?

Thanks for clarifying that. Where is that information found?

Adding the space before does fix the problem with Variant but brings back a problem with no space following Cnj. at
<span class="Part_Of_Speech">Cnj</span><span class="Gloss_English">after, later, afterwards</span>.

The problem does NOT occur if Gloss_English follows the first Part_Of_Speech.




I added
.Part_Of_Speech ~ .Part_Of_Speech:after {content: ". " ; font-weight: normal ;}
to fix the problem but I don't know why I needed to add a space after the period here and a space before Gloss_English also.
Oh the mysteries of computers.





CSS:
..
.Part_Of_Speech {display: inline ; font-style: italic ; color: blue ; font-size: 90% ; }
.Part_Of_Speech ~ .Part_Of_Speech {display: run-in ; }
.Part_Of_Speech ~ .Part_Of_Speech:after {content: ". " ; ; font-weight: normal ;}
.Part_Of_Speech:after {content: "."; font-weight: normal ;}
.Part_Of_Speech:before {content: " "; }
...
.Gloss_English {}
.Gloss_English:after {content: ";"; font-weight: normal ;}
.Gloss_English:before {content: " "; }
...

When I change
.Gloss_English:before {content: "x x"; }
The "x x' shows up as expected
but with
.Gloss_English:before {content: " "; }
The space before disappears as in first attached file.

So something eats the space but I don't know what.

Jim Albright
Wycliffe Bible Translators

1. correct space following Part_Of_Speech.png‎ 44.8 kB
2. missing space after Part_Of_Speech.png‎ 47.4 kB

Would throwing in a zero-width space here and there help? I've found them to be quite handy with Prince

Dave

Thanks Dave,

I'll keep that in mind. I have it working now.

Jim Albright
Wycliffe Bible Translators