CODEWITHSUNDEEP
cytoscape.js
paul shannon
paul shannon

Reputation: 375

cytoscape.js: set node label font-size less than one

I find great support for very small edge width and node border width, very useful when we zoom in deeply:

cy.edges().style({"width": 0.01})
cy.nodes().style({“border-width”: 0.01})

but font-size is less malleable: any font-size less than 1 appears to be clamped to 1. Thus the last three of the following commands, executed from the javascript console, produce the same result:

cy.nodes().style({"font-size": 10})    // big font
cy.nodes().style({"font-size": 1})     // much smaller
cy.nodes().style({"font-size": 0.1})   // unchanged
cy.nodes().style({"font-size": 0.01})  // unchanged

In each case (using the last as an example) the font-size property seems to be properly assigned:

cy.nodes().style("font-size”)   // “0.01px"

But the rendered node size remains at 1. Any ideas?

Thanks!

Upvotes: 5

Views: 4890

Answers (1)

maxkfranz
maxkfranz

Reputation: 12242

This has been answered on Github. This is an issue that some browsers have, and there's nothing that can be done in the library to change the browser's behaviour

--

Copied from Github : https://github.com/cytoscape/cytoscape.js/issues/1173

This is a limitation of how browsers implement font rendering in canvas. There's nothing we can do in this case on the library side.

The only suggestion I have is to scale up your styles. Multiply your sizes by a factor such that the font size is at least 1px. While font sizes can't scale, the zoom level can scale arbitrarily. Your zoom levels will be different, but zoom is just a relative measure anyway.

Upvotes: 3

Related Questions