I am trying to correct the way DAB displays a table and would appreciate help.
In Flex the table part of the entry looks like this:
And in the preview area all looks fine:
Entry of exported xhtml in browser looks fine too:
Entry in DAB 10.4 …
Any tips for correcting the way it is displayed in DAB ?
Thanks in advance for your help.
Bart.
What is the HTML code in the XHTML look like for the table? Can you post that in a code block?
The way it is being rendered in DAB makes it look like it is not in an HTML table but in div or span.
Either the CSS is not being imported correctly or is missing. Adding some styles should fix it.
Hello Ian, thanks for writing … In Chrome the structure looks like this:
The “code” I think should be this: (Even in VS Code or Visual Studio it looks like this …)
<div class="entry" id="g6f4829ea-a1de-403a-aa44-05ff1db15895"><span class="mainheadword"><span lang="dux"><span lang="dux"><a href="#g6f4829ea-a1de-403a-aa44-05ff1db15895">vyɛɛ</a></span><span lang="fr" style="font-family:'Arial Unicode MS',serif;font-size:14pt;font-weight:bold;color:#000;font-size:58%;position:relative;top:0.3em;"><a href="#g6f4829ea-a1de-403a-aa44-05ff1db15895">2</a></span></span></span><span class="pronunciations"><span class="pronunciation"><span class="form"><span lang="dux-fonipa">vʲɛɛ</span></span></span></span><span class="senses"><span class="sharedgrammaticalinfo"><span class="morphosyntaxanalysis"><span class="graminfoname"><span lang="fr">n.</span></span></span></span><span class="sensecontent"><span class="sense" entryguid="g6f4829ea-a1de-403a-aa44-05ff1db15895"><span class="definition"><span lang="fr">bouillie; petit déjeuner liquide</span><span lang="bm">baga; seri</span><span lang="en">breakfast porridge</span></span><span class="examplescontents"><span class="examplescontent"><span class="example"><span lang="dux">Nɔnɔn rɔ nan vyɛɛ rɔ baara.</span></span><span class="translationcontents"><span class="translationcontent"><span class="translation"><span lang="fr"><span lang="fr" style="font-size:10pt;font-style:italic;color:#00F;">proverbe: </span><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">Le lait ne gâte pas la bouillie.</span></span><span lang="en"><span lang="en" style="font-size:10pt;font-style:italic;color:#00F;">proverb: </span><span lang="en">Milk does not spoil the porridge.</span></span></span></span></span></span></span><span class="tableau"><table><tbody><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">shivyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">liquide de farine de tô</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">vyɛɛxu</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">mets liquide de farine granulée</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">xlankahazho vyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">bouillie de liquide de maïs</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">jeɲɛunvyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">bouillie de miettes de céréales</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">ŋihɛzhoravyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">bouillie à base de potasse</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">kengevyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">bouillie de graine de sorgho</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">mɔinvyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">bouillie de graine de riz</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">mɔnvyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">bouillie de graine de petit mil</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">didavyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">bouillie de liquide de maïs</span></td></tr></tbody></table></span></span></span></span></div>
Another way to display the code (via VS Code) could be this:
| shivyɛɛ | liquide de farine de tô |
| vyɛɛxu | mets liquide de farine granulée |
| xlankahazho vyɛɛ | bouillie de liquide de maïs |
| jeɲɛunvyɛɛ | bouillie de miettes de céréales |
| ŋihɛzhoravyɛɛ | bouillie à base de potasse |
| kengevyɛɛ | bouillie de graine de sorgho |
| mɔinvyɛɛ | bouillie de graine de riz |
| mɔnvyɛɛ | bouillie de graine de petit mil |
| didavyɛɛ | bouillie de liquide de maïs |
<span xmlns="http://www.w3.org/1999/xhtml" class="tableau"><table><tbody><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">shivyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">liquide de farine de tô</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">vyɛɛxu</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">mets liquide de farine granulée</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">xlankahazho vyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">bouillie de liquide de maïs</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">jeɲɛunvyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">bouillie de miettes de céréales</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">ŋihɛzhoravyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">bouillie à base de potasse</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">kengevyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">bouillie de graine de sorgho</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">mɔinvyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">bouillie de graine de riz</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">mɔnvyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">bouillie de graine de petit mil</span></td></tr><tr><td><span lang="dux" style="font-family:'Noto Sans',serif;font-size:12pt;">didavyɛɛ</span></td><td><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;">bouillie de liquide de maïs</span></td></tr></tbody></table></span>
Ok that is a HTML table. So DAB is breaking a lot of HTML rules. I was not expecting that.
Option 1: Add in a Style > Modification for both tr and td display: block;
Option 2: Use GeckoView in Font Handling. It has a different and much bigger rendering engine.
If both of those fail then DAB is doing something to the HTML.
I’ll write this up.
Thanks Ian for the tips … Option 2 ) using gecko increaed the apk filesize from 22mb to 250mb and did not resolve the issue.
Option 1: Adding the style, I am not quite sure what to add exactly and what should be the content. Could you give an exemple of each addition I would need to make?
Thanks in advance for your help.
Bart
Here is what I’d try for the tr.
And the same for td
However if the Gecko did not fix it then I have to assume that the HTML table is being converted to something else. Most likely spans. The question then is does the tr and td become a class for the span.
So to test that put a period before the td. i.e. .td
I’ll write this up.
Hi Ian, thanks for the detailed description. I tried all combinations, with td and tr, .td and .tr with gecko and without. They did however not affect the way the table is displayed in DAB:
I was wondering , should there not be a table defined somewhere? (I can’t find it) Or is it because I am using the french interface in FLEx and thus this has become tableau … and that DAB cannot handle “tableau” in the styles?
Do you have a sample SAB project that you could provide to assist in investigating this issue?
Hello David, thanks for offering to help. How can I send you the DAB project ? (not SAB) …
Possibly related is the fact that in the summary screen, the 2nd, 3rd and 4th languages are also displayed without spaces and even without their own colors :
Bart I have seen similar to this before.
If you can send a snippet of xhtml of just the words you mention we can look how to fix the xhtml manually. The fix I used last time was on the Language abbreviations before the language words. Yours does not have that so would need to target something else. There are also CSS fixes possible but hard to find which one to tweak in DAB.
Look at your Flex configuration. Do you have a separate configuration for each language for the gloss?
Duplicate the Gloss for each language, Turn on the glosses so you can see it. Configure it to look the way you want, color, spacing. Then turn off the Gloss. Then try that in DAB.
In this example I made Portuguese blue and eng red. The previous words are definition or gloss and as there is no definition they are the same. But we turn off the gloss after it looks as we want.
Untested.
Hi Ian, thanks for replying, and thanks for the tip. For now I have decided to just display 1 language (french in the summary). I just posted the problem in a separate question in the forum.
Your experiment is interesting and worth pursuing. Right now I do not have the gloss duplicated:
Here is the “element copy” of the entry A wa that I made from chrome that you requested:
<div xmlns="http://www.w3.org/1999/xhtml" class="entry" id="gb47c7625-ca78-4998-a36a-cd5236abc8ab"><span class="mainheadword"><span lang="dux"><a href="#gb47c7625-ca78-4998-a36a-cd5236abc8ab">a wa</a></span></span><span class="pronunciations"><span class="pronunciation"><span class="form"><span lang="dux-fonipa">awa</span></span></span></span><span class="minimallexreferences"><span class="minimallexreference"><span class="ownertype_name"><span lang="fr">Synonyme générale</span></span><span class="configtargets"><span class="configtarget"><span class="headword"><span lang="dux"><a href="#gda925c5c-9bc7-4ff8-84a0-b57fc1dfcdf3">le</a></span></span></span></span></span></span><span class="senses"><span class="sharedgrammaticalinfo"><span class="morphosyntaxanalysis"><span class="graminfoname"><span lang="fr">vi.</span></span></span></span><span class="sensecontent"><span class="sense" entryguid="gb47c7625-ca78-4998-a36a-cd5236abc8ab"><span class="definitionorgloss"><span lang="fr">partir; aller</span><span lang="bm">taa</span><span lang="en">to leave; to go</span></span><span class="examplescontents"><span class="examplescontent"><span class="example"><span lang="dux">Mùn y'a wa zhen nɔ un i sii re.</span></span><span class="translationcontents"><span class="translationcontent"><span class="translation"><span lang="fr" style="font-family:'Noto Sans',serif;font-size:12pt;color:#000;">Allons au champ ensemble.</span><span lang="en">Let's go to the field together.</span></span></span></span></span></span></span></span></span></div>
Your possible solution may not work in our case as we have not used just the Gloss (\ge) but have many definitions. Most entries just have 1 “dummy” gloss for the sake of import. I will give the experiment a try later.
Bart.