Picture and license data formatting

DaveR · August 18, 2024, 1:01am

Hello all. I’m working on a lexicon with accompanying pictures for entries. It’s being exported from FLEx as a configured XHTML. In my FLEx dictionary layout, the image is 2 inches max height, and the vernacular sense is centered below, with the license data centered below that. In FLEx, it looks like this:

I’ve set this up in FLEx by using the following override .css code.

To the best of my understanding, the original HTML considers the image, headword, and license info to all be on one line.

My problem comes once it’s moved over to DAB. Here is the same entry in DAB and a second for reference.

I lose any formatting of the text. The headword is no longer bold and no matter what I change in the CSS I can’t get it to become bold again.
I have no control over the image size. They all show at whatever resolution they were saved at.
It returns to it’s original formatting of all being on one line word wrapped.

As a heads up, I have tried multiple different ways to format this via CSS. I’ve used ‘\a’, display: block, and other things I’ve seen on the internet or in these forums. Everything I try always works in the HTML on a browser. I lose all changes and control once it is moved to DAB. Any suggestions would be awesome! Thanks.

DaveR · August 20, 2024, 1:13pm

I wanted to add a mini-update to this. All of my images are square and the vast majority are between 180x180 and 400x400. I realized the reason that my images were all going to the max resolution was because in the app builder GUI, I had checked ‘resize image files to reduce app size’ and set the max width to 400. When I reduced this, the image size reduced.

In one sense I can just standardize my image resolution to solve this. But it would definitely be nicer to be able to use proper .css to automatically adjust each image to say 50% screen width… thus no resolution adjustment needed.

And the far uglier problem to me is the fact that there is no formatting, no spacing, no line breaks in the pic description and licensing info.

DaveR · August 23, 2024, 9:57pm

If anyone’s interested, I’ve found one way of solving my original question.
I managed to get a partial solution by adding the following to my .css override file in Flex:

.entry .picturesofsenses {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.entry .picturesofsenses .picturesofsense {
    display: block;
    text-align: center;
    margin: 0pt 0pt 4pt 4pt;
    padding: 2pt;
}

.entry .picturesofsenses .picturesofsense img {
    max-height: 2in;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.entry> .picturesofsenses .picturesofsense> .captionContent .headword[lang|="tma"]{
    font-weight: bold;
    display: block;
    text-align: center;
}

.entry .picturesofsenses .picturesofsense .captionContent .license {
    font-weight: normal;
    display: block;
    text-align: center;
}

The most important component to making it work this way was the flex display in the very top portion of css.

But this still didn’t completely solve the issue. It put the image on top, the entry word below the image, and the copyright below that and centered them all. But there was still no way to format the entryword to be bold, size the picture how I wanted it, and sometimes the centering of the copyright was really weird.

To the best of my understanding, it seems like the image sizing is really tied to that checkbox in DAB that allows you to reduce image resolution. Everything I tried in css was always overriden by whatever was marked there. And when it was unmarked, it just made everything at max resolution.

The entry word and the copyright both seem to somehow inherit their attributes from other elements in the HTML. And I am obviously not knowledgeable enough to know how to get around that. Sometimes when I finally got something to change, it would mess other areas up.

So the best solution I could come up was to make the attributes inline in the HTML file because inline attributes override .css attributes.

In appearance>changes in DAB, I created 4 find-replaces based on the same .css elements I posted above (with a little tweak for image size). I tried doing it all with one regex find and replace, but some of the optional spans kept throwing things off.

Find and replace 1 added the flex box that allowed positioning of the contents:
<span class="picturesofsenses">
<span class="picturesofsenses" style="display: flex; flex-direction: column; align-items: center;">

Find and replace 2 positioned, sized, and put the image on it’s own line.
<div class="picturesofsense"><img class="thumbnail" src="([^"]*)" id="([^"]*)" />
<div class="picturesofsense"><img class="thumbnail" src="$1" id="$2" style="width: 70%; height: auto; display: block; margin-left: auto; margin-right: auto;" />

The regex here just makes sure that the source and the id are taken from the search, and put back untouched in the replacement.

Find and replace 3 made the entry word bold, put it on it’s own line, and centered it:
<div class="captionContent"><span class="headword">
<div class="captionContent"><span class="headword" style="font-weight: bold; display: block; text-align: center;">

Find and replace 4 set the license font weight to normal, gave it its own line, put it in the center.
<span class="license">
<span class="license" style="font-weight: normal; display: block; text-align: center;">

Here’s the final result:

I’d still rather be able to do this in .css so if anyone else comes up with something, please add a posting.

jheath · October 26, 2024, 1:17pm

@DaveR Although DAB doesn’t get very much love, I was able to fix one bug which may help you in this situation.

The release notes:

state that 12.2 fixed this bug:

Bugs Fixed:

In the Android app:

Some XHTML tags weren’t included in the html output used for entry display, causing some CSS styles to not match. This fix should improve image/caption formatting in the app.

It would be interesting to know if this fix helps your cause.

Jeff