Card margins and text size

, ,
1

Is there a way to change the card-margins and/or the text size? My text input is fairly large (100-200 words per entry), and the defaults make it very hard to read. I would prefer having smaller margins so that more text can fit on each line.

1 Like
2

Yes, you should be able to configure this pretty flexibly in the custom_theme setting in your prodigy.json (or in the 'config' returned by a custom recipe, if it’s recipe-specific). Some of the relevant settings that might help:

  • cardMaxWidth: maximum width of the annotation card
  • cardMinWidth: minimum width of the annotation card
  • largeText, mediumText, smallText: font size of large/medium/small text

Your config could then look like this:

{
    "custom_theme": {
        "cardMaxWidth": 800
    }
}

For full flexibility, you could also use the card_css setting, which accepts an object of camel-cased CSS properties and their values (see: JSS), which are applied to the card content container. If you inspect the app in your browser’s developer tools, it’s the container with the class prodigy-content. Here’s an example:

{
    "card_css": {
        "padding": 5,
        "fontSize": 18
    }
}
1 Like
3

Thank you! This worked well! Is there a place to see a list of all the custom_theme attributes? In particular, I also want to change the text size of the label names, and none of smallText, mediumText, or largeText seem to do it.

4

There's a theming overview here and the more advanced options should all be listed in your PRODIGY_README.html, available for download with Prodigy.

I just had a look and that one currently isn't exposed as a setting – I'm happy to add it in the upcoming release, though. I also thought that the label size was relative and would adapt to the text size, but I just tested it and it seems like it doesn't. So this should definitely be fixed as well.

If you want super custom stuff btw you could also use a browser extension or modify the index.html to overwrite the style of specific classes. The class names are internally consistent – they might just change in future releases, so you'd have to adjust them when you update Prodigy.

5

Thank you! I neglected to look at the PRODIGY_README.html download – I was used to just checking the online docs. Im glad the label sizes will scale or be exposed. Thanks for the great work on this project and the responsive support!

6

Hi @ines

Is this fixed in the latest release?

If not, could you provide some guidance on what CSS string we need to change the label name font size? Even the class name for label names might be a start if you dont have the full CSS handy. Im only interested in changing the size of the in-line label names which appear in the annotated. text, not the label buttons.

Thanks so much!!

7

This should be fixed, yes – label sizes should now adjust to the font size of the general card text. So if you increase/decrease the small/medium/large font size, the labels should be resized accordingly.

8

Thanks for being so responsive @ines. This fix makes a big difference for my use case!

Is there a way to independently scale the label font size?

9

If you want full flexibility, you can go via the CSS class. I can look this up for you later, or you can just check it yourself in your browser's developer tools. The classes are generated automatically on build, so it'll be something like c12345. It will be consistent across the app and interfaces, though – the only thing we can't guarantee is consistency across versions, so if we release an update that includes changes to the app, you might have to go back and adjust the class name.

10

Hi there - I'm also trying to tweak the interface. I have made the text bigger, but now the labels overlap the spans, rather than sitting below, like this:

image

I'd like the label name to appear fully below the text as in the default interface. I've tried using the browser developer tools to get the label class name. For the above example I find this:

<span class="_TokenOverlap-lineLabel-0-1-192" data-test="span-HEARING" style="background: rgb(150, 232, 206); color: rgb(0, 0, 0);">HEARING<span class="_TokenOverlap-lineRemove-0-1-193">×</span></span>

But I'm not sure where to go from there...can you help?

11

The class name you found (_TokenOverlap-lineLabel-0-1-192 ) is auto-generated and might change, so it's not reliable for styling.

You can select the title bar containing the labels in CSS using the classes .prodigy-title-wrapper and .prodigy-title

See this post for more details: