FLEx-XHTML Cookbook - 1st Recipe - How to define the layout of the "Before/Between/After" between definitions in senses

28 views

Skip to first unread message

Bart-Jacqueline Eenkhoorn

unread,

Jul 5, 2023, 11:42:56 AM7/5/23

to 'Kari Valkama' via FLEx list

Dear All,

I prepared the question following below ... but was lucky to discover the answer myself before I sent the question. So I though I would share the solution for your benefit.

Question:

The Configure Dictionary feature has some wonderful options to pre-style the dictionary before exporting the xhtml. I am applying a dot between senses (see below) and would like the colour of that dot to be black (and not adopt the colour of the preceding or following font). Is there a way to do this inside FLex?

Answer: (yes, it can be done)

The answer is to add the lines below to the following file :

"C:\ProgramData\SIL\FieldWorks\Projects\< .. project name ...>\ConfigurationSettings\Dictionary\ProjectDictionaryOverrides.css"

/* This file can be used to add custom css rules that will be applied to the xhtml export */
.entry> .senses > .sensecontent > .sense> .definition> span+span[lang|='en']:before,.entry> .senses > .sensecontent > .sense> .definition> span+span[lang|='bm']:before{
    content:' • ';
    font-family:'Noto Sans',serif;
    font-size:12pt;
    color:#000;
}

I discovered these settings by loading the xhtml exported file in Chrome and with inspect find out where the CSS code is located:

- load the xhtml exported file in chrome and tyle CNTR-SHIFT-I to open the developer tools.

You should see a screen that has the xhtml at the left and the collapsed elements on the right:

Now start opening the <body> elements and you will see on the left which part is "affected"

Continue to expand and hover over the elements until you reach the spot you want to look at:

In my question I want to look at the "Before" in the sens area:

With the "Before" selected, on the right side of the screen you will see where Chrome finds the information to display the correctly. In this case in the CSS file linked to the XHTML created output, and specifically on line 866 :

Open the .css file in your favourite editor and go to line 866:

If your editor understands css and you hover over the first element of line 866 you could see a popup with the hierarchy of the "entry". It so happens that "before" can have more attributes that just "content". If you investigate the css file further you will find attributes like colour and font are possible. (BTW, this is also described in the Flex Help under Custom CSS Override example)

- If you want to make the change just for this exported xhtml file then add a new line at the end of content .... ; and add the additional attributes of your choice. For example:

Save the file and go back to Chrome. Refresh with F5 and you should see your change :

If you would like this to be a permanent change, also visible in the FleX Configured Dictionary preview, then add the complete "entry" element information also to the file:

"C:\ProgramData\SIL\FieldWorks\Projects\< .. project name ...>\ConfigurationSettings\Dictionary\ProjectDictionaryOverrides.css"

I hope this is helpful information, and I would appreciate to know what others have done with the ProjectDictionaryOverrides.css ... maybe we can assemble this kind of information in an online FLeX-XHTML cookbook

FLeX-XHTML Cook Book - 1st Recipe :

Bart.