GjjvdBurg/labella.py

textStyle example

Closed this issue · 4 comments

Had a look through the examples but could find one which showed how to adjust the font properties.

On the d3kit-timeline side they use a key as part of the options dict called textStyle:

textStyle: {
    'fill': '#fff',
    'text-decoration' : function(d){ return d.team==='BRA'? 'none': 'underline'},
    'font-weight': function(d){ return d.team==='BRA'? 700: 400}
  }

Tried following that structure with the below but didn't make any difference:

"textStyle": {
    "fill": "#000",
    "text-decoration": "underline",
    "font-weight": 700,
}

Is there maybe an example thay you could include in the examples directory that shows how to use this? Would be interested in changing the font as well.

Hi @mweitzel2005,

Do you mean for the LaTeX output or for SVG output? For LaTeX you can simply style the text in the input data itself, as well as use the preamble option or the fontsize option (see the docs). Alternatively you could override the textFn function in the options dictionary, which will be called on all input dictionaries.

Let me know if that solves your problem.

Overriding the textFn worked a treat:

"textFn": lambda x: "{\\fontfamily{qcr}\\selectfont" + str(x["time"].year) + " - " + x["text"] + "}",

Couldn't get the preamble to work but most likely due to my ignorance of Latex. Thanks for the help!

Glad to hear the textFn function worked!

Some additional font faces: https://www.overleaf.com/learn/latex/Font_typefaces#Reference_guide

  • Set the fontcode acronym(?) in @mweitzel2005 's function

  • Ex: replace qcr with phv from the reg guide

    • If you installed MiKTeX, you'll be prompted to download the corresponding fontface package.
    • image
  • Additional resources: https://tug.org/FontCatalogue/

    • I can't easily find the 3-4 letter acronyms, but this catalog looks expansive