Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Outline for text layers #1597

Open
alanocallaghan opened this issue Apr 13, 2017 · 9 comments
Open

Outline for text layers #1597

alanocallaghan opened this issue Apr 13, 2017 · 9 comments

Comments

@alanocallaghan
Copy link

It would be very helpful to be able to add outlines to text layers. This allows for text to be legible on any background (eg white text with black outline, or black text with white outline).

Also, though not strictly related, there does not seem to be any documentation of the options "familysrc", "sizesrc", or "colorsrc" anywhere.
https://plot.ly/javascript/reference/#bar-textfont
https://plot.ly/r/reference/#scatter-textfont

Related: talgalili/heatmaply#42

@etpinard
Copy link
Contributor

Also, though not strictly related, there does not seem to be any documentation of the options "familysrc", "sizesrc", or "colorsrc" anywhere.

Those shouldn't even be displayed in the docs pages. Thanks for pointing this out.

@alanocallaghan
Copy link
Author

No worries, fyi there are a few similar things hanging around in the documentation, eg
https://plot.ly/javascript/reference/#bar-marker-colorbar-tickvalssrc

@etpinard
Copy link
Contributor

It would be very helpful to be able to add outlines to text layers.

About this here, can you share a screenshot to help us understand what you're looking for?

@alanocallaghan
Copy link
Author

alanocallaghan commented Apr 17, 2017

Google maps uses dark text with a white outline, while white text with a dark outline also works. It's the most effective way to make text readable on any background

image

image

@rreusser
Copy link
Contributor

A note on implementation: for SVG, it requires two copies of the text element with different stroke-width properties (that is, it's possible but not just a simple property, which means it requires a bit more effort)

@alexcjohnson
Copy link
Contributor

Our much-neglected polar charts do this with the text-shadow style:
screen shot 2017-04-18 at 10 13 56 am

<text dy="0" y="0" x="0" dx="0" transform="rotate(45) translate(0,15)" style="
  text-anchor: start;
  font-size: 15px;
  font-family: Tahoma, sans-serif;
  fill: gray;
  text-shadow: white -1px 0px 0px, white 1px -1px 0px, white -1px 1px 0px, white 1px 1px 0px;
">0</text>

Might cease to look good at a greater thickness though, as that's not going to increase the radius of curvature. But it at least avoids having to copy everything. Kind of an odd collection of offsets, I wonder if that was intentional...

I'll also note that applying this to mathjax will require a completely distinct implementation regardless, as it generates its own SVG paths.

@rreusser
Copy link
Contributor

Oh wow, I stand corrected! Thanks for that. I missed that in my googling.

@etpinard etpinard changed the title Outline for text layers and documentation of options Outline for text layers Jun 30, 2017
@etpinard etpinard mentioned this issue Jun 30, 2017
3 tasks
@etpinard etpinard mentioned this issue Dec 12, 2017
@etpinard
Copy link
Contributor

From #3191 (comment)

Definitely an improvement! I'm just wondering if we want to go one step further and make a new attribute (tickshadow?) that defaults to paper_bgcolor but people could set it to whatever they want (including transparent).

@fgenoese
Copy link

@etpinard : After reading through this issue it is not clear to me what the solution is.

Imagine the following case: on top of a choropleth map you add a text trace to indicate a value permanently (not just through a hover). Considering that the heatmap has colors from light yellow to dark blue, it is almost impossible to choose a font color of the text trace which is visible on the map. What would you suggest?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants