Is there a way to control "line-height" of the main text box

Hi,

I'd like to adjust the line-height attribute of the main text box (where a user annotates on) to show larger portions of text. Currently it seems to be hard coded to 1.7. I tried setting custom CSS in prodigy.json for the prodigy-content class which had no effect. Inspecting the UI rendered in the browser this attribute seems to be overwritten by the hard coded value and the box does not seem to have a unique class name but rather a random one, e.g. c01135.

Is there a way to fix this or am I just looking at the wrong thing here?
Thanks for any pointers :slight_smile:

Hi! For the regular text interfaces, the .prodigy-card class is definitely the correct one to use to override things like line height and font style. I just had a look and you're right that the span highlighting UIs have their own wrappers to ensure a slightly higher line height, and we should definitely expose this via a human-readable name (e.g. .prodigy-spans). I'll add this for the next release.

In the meantime, you could do:

.prodigy-content > div {
    line-height: 1.5;
}

Or, if you're adding the overrides to your global prodigy.json and want to make sure they're only applied to a specific interface:

[data-prodigy-view-id="ner"] .prodigy-content > div {
    line-height: 1.5;
}

Thanks Ines! That works for me, I also added a rule for the "mark" padding to not overlay surrounding text:
.prodigy-content > div > mark { padding: 0 }

1 Like

Cool, thanks for the update! v1.10.8, which was just released should now give you access to a named prodigy-spans class as well.

Hi Ines - I am using the manual spans annotation UI and don't see a prodigy-spans tag. I just see tags with fixed in-line CSS for the height (60px). This makes it pretty hard to annotate longer texts as it requires a lot of scrolling. I tried fixing the span height to 30px but then the annotation underlines bleed into the line below. Any thoughts / suggestions for how to shrink line height? Thanks so much