In [1]:
import toyplot
canvas = toyplot.Canvas(width=500, height=150)
axes = canvas.axes(show=False)
axes.text(0, 0, "Text!", style={"font-size":"24px"})
axes.scatterplot(0, 0, color="black", size=7);
To control the horizontal alignment, use the text-anchor CSS attribute to change the text justification relative to its X coordinate:
In [2]:
canvas = toyplot.Canvas(width=500, height=300)
axes = canvas.axes(show=False)
axes.plot([0, 0], [-2, 2], color="gray", style={"stroke-width":1})
axes.text(0, 1, "Centered", style={"text-anchor":"middle", "font-size":"24px"})
axes.scatterplot(0, 1, color="black", size=7)
axes.text(0, 0, "Left Justified", style={"text-anchor":"start", "font-size":"24px"})
axes.scatterplot(0, 0, color="black", size=7)
axes.text(0, -1, "Right Justified", style={"text-anchor":"end", "font-size":"24px"})
axes.scatterplot(0, -1, color="black", size=7);
After the anchor has been established, the text can be shifted in arbitrary amounts, using the -toyplot-anchor-shift attribute. Note that this is non-standard CSS, provided by Toyplot for symmetry with the standard baseline-shift attribute, below:
In [3]:
canvas = toyplot.Canvas(width=500, height=300)
axes = canvas.axes(show=False)
axes.plot([0, 0], [-3, 2], color="gray", style={"stroke-width":1})
axes.text(0, 1, "Shifted +0px", style={"-toyplot-anchor-shift":"0", "text-anchor":"start", "font-size":"24px"})
axes.scatterplot(0, 1, color="black", size=7)
axes.text(0, 0, "Shifted +20px", style={"-toyplot-anchor-shift":"20px", "text-anchor":"start", "font-size":"24px"})
axes.scatterplot(0, 0, color="black", size=7)
axes.text(0, -1, "Shifted +40px", style={"-toyplot-anchor-shift":"40px", "text-anchor":"start", "font-size":"24px"})
axes.scatterplot(0, -1, color="black", size=7);
axes.text(0, -2, "Shifted -20px", style={"-toyplot-anchor-shift":"-20px", "text-anchor":"start", "font-size":"24px"})
axes.scatterplot(0, -2, color="black", size=7);
To control vertical alignment, set the text baseline with alignment-baseline. By default, the text baseline will line-up with the text Y coordinate. CSS typography is a complex topic and there are many baseline types to accomodate different writing modes and fonts. The following baselines are likely to be the most useful for Western scripts. Note the subtle difference between the "central" and "middle" baselines - the former tends to center the upper-case letters in Western scripts while the latter tends to center lower-case letters, and is the Toyplot default:
In [4]:
canvas = toyplot.Canvas(width=600, height=300)
axes = canvas.axes(show=False)
axes.plot([-2, 3], [0, 0], color="gray", style={"stroke-width":1})
axes.text(-1, 0, "Hanging", style={"alignment-baseline":"hanging", "font-size":"24px"})
axes.scatterplot(-1, 0, color="black", size=7)
axes.text(0, 0, "Central", style={"alignment-baseline":"central", "font-size":"24px"})
axes.scatterplot(0, 0, color="black", size=7)
axes.text(1, 0, "Middle", style={"alignment-baseline":"middle", "font-size":"24px"})
axes.scatterplot(1, 0, color="black", size=7)
axes.text(2, 0, "Alpha", style={"alignment-baseline":"alphabetic", "font-size":"24px"})
axes.scatterplot(2, 0, color="black", size=7);
Of course, you can shift the text relative to its baseline by arbitrary amounts, using baseline-shift. While you are free to use any CSS length units for the shift, percentages are especially useful, because they represent a distance relative to the font height:
In [5]:
canvas = toyplot.Canvas(width=700, height=300)
axes = canvas.axes(show=False)
axes.plot([-2, 3], [0, 0], color="gray", style={"stroke-width":1})
axes.text(-1, 0, "Shift -100%", style={"baseline-shift":"-100%", "font-size":"24px"})
axes.scatterplot(-1, 0, color="black", size=7)
axes.text(0, 0, "Shift 0%", style={"baseline-shift":"0", "font-size":"24px"})
axes.scatterplot(0, 0, color="black", size=7)
axes.text(1, 0, "Shift 66%", style={"baseline-shift":"66%", "font-size":"24px"})
axes.scatterplot(1, 0, color="black", size=7);
axes.text(2, 0, "Shift 100%", style={"baseline-shift":"100%", "font-size":"24px"})
axes.scatterplot(2, 0, color="black", size=7);
Of course, you're free to combine all four styles in any way that you like.