Formatting and styles for the About page

Dictionary App Builder
1

I’m attempting to put the introduction / mini-grammar into the About box to see how it comes out. Some parts are coming out fairly well, but there are also challenges. Here is one snippet, with resulting output:

<ol>
<li><b>Les lettres qui existent en l’arabe tchadien mais pas en français</b><br>
L’arabe tchadien écrit en lettres latines utilise deux lettres qui ne se trouvent pas en français. Il s’agit de <b>kh</b> et <b>’</b>.<br>
<br>
Examples de <b>kh / KH</b>:
<table style="border-collapse:collapse;">
<tr><th style="border:1px solid black;">mot</th><th style="border:1px solid black;">définition</th></tr>
<tr><td style="border:1px solid black;">khazaala</td><td style="border:1px solid black;">gazelle</td></tr>
<tr><td style="border:1px solid black;">khalla</td><td style="border:1px solid black;">mil</td></tr>
<tr><td style="border:1px solid black;">khabar</td><td style="border:1px solid black;">information</td></tr>
<tr><td style="border:1px solid black;">khidime</td><td style="border:1px solid black;">travail</td></tr>
<tr><td style="border:1px solid black;">khiyaate</td><td style="border:1px solid black;">couture</td></tr>
</table>

Le son <b>kh</b> est produit à l’arrière de la bouche, dans la région avant la luette. Cette lettre est la transcription des lettres arabes : <span style="font-family:font-shu-Arab;">خ غ</span></li>

image
image720×745 53.9 KB

Good things: Lists, <br>, <hr>, tables, font specification possible

Not so good things:

  • the list was supposed to be an ordered list (ol), but is a bulleted list (ul)
  • to get borders around the table cells, must be specified in each cell
  • the font size in the table is smaller, but no where to change it that I can find
  • image insertion does not work

You can define CSS attributes in the Styles tool, but you can’t add new styles, and there don’t seem to be styles to modify for basic tags like tables. Maybe I’m missing something? There is one style for “body.about” which applies to the entire About box. The other Paragraph and Character Styles seem to be related to the presentation of the LIFT data in the app, so I’m reluctant to “take over” any of those. The other app builders have a Custom Styles section, and a button for Add Style…

I appreciate any pointers…

2

Good documentation.

If you modify one style in DAB then look at the .appdef file you will have a model of how to add other styles (not already defined) at the geek level. You could do that, but I know it would scare many.

Look for Styles

  <styles>
    <style name="span.field-en" category="text">
      <style-decl property="font-family" value="font-en"/>
      <style-decl property="font-size" value="95%"/>
      <style-decl property="color" value="TextColor8"/>
      <style-decl property="font-style" value="normal"/>
    </style>
  </styles>

Add a new styles like this:

    <style name="td" category="text">
      <style-decl property="border" value="1px solid black"/>
    </style>

One <style-decl for each attribute.

I don’t see closing tags for <ol> that could impact on the list. I finally found the closing tag for the <li>. It may be that HTML is assuming the list item is in an unordered list and ignoring the opening ordered list.

I always use the XHTML version of tags as they are never wrong rather than the HTML version. That is <br/> rather than <br> but as you note the HTML version is working.

1 Like
3

Yes, thank you for documenting this! Much appreciated

4

Just to document for the next person… Thanks to the suggestion from @Ian_McQuay, I was able to directly modify the DAB project .appdef file (top level of the project folder in Documents\App Builder\Dictionary Apps\App Projects) to add other styles. (Note that I did this while DAB was closed, just to avoid any confusion…) I found the <styles> element in the .appdef file and added within that tag:

<style name="table" category="text">
  <style-decl property="border-collapse" value="collapse"/>
</style>
<style name="th" category="text">
  <style-decl property="padding" value="0.3em"/>
  <style-decl property="border" value="1px solid black"/>
</style>
<style name="td" category="text">
  <style-decl property="padding" value="0.3em"/>
  <style-decl property="border" value="1px solid black"/>
</style>
<style name="td.noborder" category="text">
  <style-decl property="padding" value="0em"/>
  <style-decl property="border" value="0px"/>
  <style-decl property="vertical-align" value="top"/>
</style>

The last style allows me to have <td> elements in tables that don’t have borders - something that I wanted to have in my layout. As soon as I added those styles and opened DAB, they appeared on the Styles tool, Text Styles tab, under Message Box:

image
image1053×490 15.2 KB

Once the styles are there, I can make modifications to those styles directly in DAB, by double-clicking on the style name, and modifying the Properties or CSS.

I thought it might also help someone else out there if I included a draft of the HTML that I put in my About box. So here it is (I put it in a .zip file because I couldn’t post the .htm file directly in this reply…)
HTML Intro for app.zip (6.6 KB)

You can open the .htm file directly in your browser to preview it. To put it in the About box of my app in DAB, I copy everything that is inside the <body> ... </body> tag (that structure is there just to allow me to view it in a browser) and paste it into the About tool in DAB (there is actually a bit more text already there so I paste below that). As mentioned in my original post, the text doesn’t come out quite the same in the dictionary app About box - numbered lists come out bulleted, lists can’t be embedded, list items wrap all the way to the left margin, the browser doesn’t have the styles I embedded in DAB so tables look differently, also fonts are different, spacing is different. So you have to do a little trial and error to see what works well in the app.

But I think the attached HTML file gives a decent representation of the printed dictionary introduction in the About box of my app, and that was the goal, so I’m happy with that for now.

Room for improvement in DAB:

  • Being able to add / edit custom styles in the UI
  • Allow images in the About box (discussed in another post)
  • Improvements to HTML handling - especially around list (numbered lists don’t work, and formatting is not very good)
  • Why is there a special format for links to websites - whhy not just use the standard HTML link format?
1 Like