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

Features: repeat distance, allowCrop, multi-color labels, orientation 'auto' and 'flip', turnedText, ... #72

Open
wants to merge 10 commits into
base: master
from

Conversation

Projects
None yet
2 participants
@plepe
Copy link

plepe commented Dec 24, 2018

I have a christmas present for you!

I would have liked to create pull requests for each feature, but they all depend on each other, that's why I created a "features" pull request.

It includes the following features:

  • repeat distance: You can specify repeat as float to set the distance between each repetition in pixels (will be approximated by spaces). Replaces #70 .
  • allowCrop: If the line is too short to display the whole text, crop the text. If false, don't show the text at all. (Default: true). This could improve performance on maps with short lines.
  • multi-color labels: (or better "labels with multiple tspans") A label can consist of several tspans, which can change all available attributes. See documentation of the extended text parameter. Fixes #26 . (See the "Rainbow" in the screenshot below)
  • Orientation 'auto': Flip labels according to the orientation of the line (also for part of lines). Therefore labels can always be upright. (See the "Road" in the screenshot below)
  • Orientation 'flip': Fix #71 .
  • Option turnedText: When flipping a label because of orientation auto (for east-west line parts), use this text instead. Useful if a label includes directional characters like arrows.

Also:

  • for performance reasons, the length of labels will be cached.
  • Accept offset=0 (see bug #73)

Tell me what you think about it.

  • Are the options named properly?
  • Is the documentation understandable?
  • Can you detect any regressions?

rainbow-and-directional-labels

@plepe plepe force-pushed the plepe:feature1 branch from 1f82d8c to 7494e3d Dec 24, 2018

@plepe

This comment has been minimized.

Copy link

plepe commented Jan 8, 2019

One big problem is browser support for rotated text on textpath.

  • Chrome-based browsers (Opera, ...): very good
  • Firefox: problems with fonts with variable width, also shifted by one character
  • IE / Edge: does not rotate labels

You can check how your browser behaves (first image) and compare with screenshots of other browser on this test page:
https://xover.mud.at/~skunk/svg-rotate-glyph

Please submit screenshots of other browsers!

I guess I should implement a browser detection and mitigate problems (e.g. select a fixed-width font on firefox, disable rotation on IE/Edge).

@clementallen

This comment has been minimized.

Copy link

clementallen commented Jan 13, 2019

Love this! Really hope it can get merged in soon 👍
If it helps, here is screenshot of the above website in Safari 12 on macOS Mojave:
screenshot 2019-01-13 20 49 42

@plepe

This comment has been minimized.

Copy link

plepe commented Jan 14, 2019

Oh no, Safari does not seem to support textpath at all!

Do you see airplanes, labels and other markers on this webpage? https://makinacorpus.github.io/Leaflet.TextPath/

Apparently there seems to be a bug in Safari:
https://stackoverflow.com/questions/50937985/text-within-svg-textpath-not-visible-from-ios-browsers

@clementallen

This comment has been minimized.

Copy link

clementallen commented Jan 14, 2019

I can see the aircraft and other markers fine in safari:
screenshot 2019-01-14 19 18 05

@plepe

This comment has been minimized.

Copy link

plepe commented Jan 14, 2019

That looks okay. I'll try to get my hands on a Mac soon, so I can test what's wrong with my test page ...

@clementallen

This comment has been minimized.

Copy link

clementallen commented Jan 14, 2019

Just cloned your fork and ran it on Safari. Everything seems to be fine apart from the turnText and orientation. Unfortunately I don't really know anything about SVG elements otherwise I'd try and fix it:

screenshot 2019-01-14 20 07 23

screenshot 2019-01-14 20 07 29

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