Documentation about DAB CSS processing

I’m trying to create a dictionary app but the main entry for the dictionary and reverse index aren’t formatted according to the FLEx CSS. I have a FLEx XHTML file and CSS.

image

Is there any documentation which explains how DAB imports CSS and how to modify the CSS afterwards if the entry isn’t formatted correctly?

An older version of the app has the correct formatting and the FLEx CSS file contains the information to display it in this way.

image

I don’t have access to the old DAB files.

Hi,

When I export from Flex, there are a couple of different options. Choosing “Classified Dictionary” exports a css file that does not have much css in it at all. Using “Configured Dictionary” exports a css file with all the css descriptions DAB uses. Flex can create a specific view that can be edited to look good on the app (Configure Dictionary View → Manage Views → New View).

To modify the CSS inside DAB, go to Appearance->Styles->Modifications and make sure “Modify styles for single entries” is checked.

A good way of finding out the specific css styles to add is to view the .xhtml file in your browser and then right click on the entry and click “Inspect” - you will be able to see the css classes that are modifying the element

Hope this helps,
Daniel

Hi Daniel,

Thanks for your reply. I haven’t had time to take a long look but I see I don’t have the Modifications option in my version of DAB (11.04).

Peter

Modifications is a “tab” under Appearance / Styles in at least 11.1.1

Hi Peter

When you create a DAB Project from an .xhtml file there should be four tabs on the Appearance>Styles page, on the right-hand pane, they appear just above the lists of styles.
Apps created with a .lift file only have the first two: Text Styles and User Interface Styles; for xhtml projects there are also Imported Styles and Modifications

Daniel

Thanks, that’s helpful. I did import using XHTML but I’m not getting the extra tabs. I had this problem with another project and I think got the extra tabs with the LIFT format but now neither project shows the tabs.

I’ve upgraded to 11.1.1 but nothing has changed.

Do you know what might trigger the appearance of the extra tabs? i.e. is it the file extension or something in the file?

Peter

In Lexicon / Lexicon Source, what filename and file format do you have displayed?

Hi Peter

It might be worth trying to create a new project again with the xhtml, and see if they appear.

It might be good to look at the .css file that go with the xhtml file. Does it have entries that look like this:

.entry> .senses > .sensecontent > .sense> .sensetype> .abbreviation> .abbreviatio+ .abbreviatio:before{
content:’ ‘;
}
.entry> .senses > .sensecontent > .sense> .definitionorgloss> span+span[lang|=‘en’]:before{
content:’ ‘;
}
.entry> .senses > .sensecontent > .sense> .definitionorgloss> span:last-child:after{
content:’ ';
}

Hi Sara,
The file name is main_DAB.xhtml and DAB says the file format is XHTML.

Peter

Hi Daniel,

yes I have that type of information. I tried creating a new project but they didn’t appear.

Peter

Hi Peter

OK, the next thing to try might be to share your files and I’ll see if it works on my system.

If you’re happy to share the files, here is an upload link:
https://seafile.ipsapps.org/u/d/bcda926b741547bf9690/
(Please include the .xhtml file and the .css file)
If you could include the .appDef file from the project directory, it would be helpful too. (If you open the .appDef file with a text editor, and look for the <stylesheets> tag, you could check that the .css file is referenced. Is the .css file in the same directory as the .xhtml file? Does it have the same filename (except for the extension)?
The “Imported Styles” tab should appear if there is a .css file associated with the project. The “Modifications” tab is supposed to appear if the source is .xhtml. (I have occasionally seen “Modifications” pop in to .lift projects, but only erratically)

I can take a closer look and see if I can figure out the problem, or submit a bug ticket if it is appropriate. What version are you using (Windows, Mac or Linux)?

Thanks,
Daniel

Hi Daniel,

Thanks for your suggestion to look at the stylesheet tag, that solved the problem. It was missing from the .appdef file. I had a look at a couple of things and discovered that the .xhtml file referenced a different .css file. I was given the files and assumed they were linked correctly. Changing the .css filename in the .xhtml file fixed the problem.

Thank you to you and Sara for your help. It is encouraging to get support from this forum as I learn the program.

Peter

Great, glad you were able to find and fix the issue!

Daniel