Reducing line spacing for span cat

[blue482 (Bo Wang)]

Hi,

I have fairly large docs (~1000 tokens each) which I want to use prodigy span cat for annotation. I have reduced smallText and increased cardMaxWidth. However, the current interface (i.e. card) still looks quite sparse and negatively affects its annotation usability. Mainly the line spacing is v large.

I have tried setting global_css as below but the spacing between the text line and label highlight is still significantly larger than I hope for (screenshot attached: text are from publicly available clinical note).

"global_css": ".prodigy-content > div { line-height: 0.0; padding: 0}"

My a noob in CSS/JS. Can anyone please give any suggestions? Many thanks!

[ryanwesslen]

Hi @blue482,

One possibility is to modify the margins for the span container in prodigy-content:

"global_css": ".prodigy-content span { margin: -10px 1px; }"

For example, using Chrome and right click "inspect" you can see what happens when we modify:

However, I noticed after doing this the labels may overlap the text. Therefore, you may have to adjust those as well.

Hopefully this helps some and let me know if you have other questions.

[blue482 (Bo Wang)]

@ryanwesslen

span { margin: -10px 1px; }

Many thanks Ryan! I can't seem to find the .c01134 element in inspect on Chrome, or anywhere on inspect that can adjust the line spacing between sentences

[ryanwesslen]

I found the span class (and .c01134 element) because I right-clicked > Inspect one of the words (rather than in the white space).

Alternatively, were you able to add

"global_css": ".prodigy-content span { margin: -10px 1px; }"

into your prodigy.json file?

[blue482 (Bo Wang)]

Thanks Ryan!

I have adjusted the span margin to "global_css": ".prodigy-content span { margin: -30px 1px; }" and now the highlighted label is out of place:

I have used inspect to adjust the height for the "Good_SRC" label and the horizontal line (they are 3 lines and I had to adjust each one by one). But I couldn't find where to adjust the height for the purple highlighted blocks (supposed to cover the relevant text "Bipolar affective disorder"). Is it any easier way to do this?