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

Create base text wrapper & SVG implementation #489

Closed

Conversation

cwillisf
Copy link
Contributor

@cwillisf cwillisf commented Jun 30, 2017

Proposed Changes

This change adds a new family of classes designed to wrap text to a maximum width. The base TextWrapper class can theoretically be used to wrap text in any context, respecting Unicode grapheme cluster boundaries and (when possible) Unicode line break opportunities. It takes a "measurement provider" as an argument, and will use that provider to measure text widths. The SVGTextWrapper is some light glue to connect an SVG-based measurement provider to the base TextWrapper, though it will likely have a few additional features in the future. For example, I anticipate that it will have a method to return a single SVG node containing several lines of wrapped text.

Reason for Changes

This is a step toward implementing say & think bubbles.

Test Coverage

None, currently. We could potentially test the wrapping algorithm by mocking a measurement provider, but we'd need a DOM (or a simulated DOM) to test the SVG version.

Known issues

Due to a limitation in the grapheme-breaker library I'm using, it's currently possible for a skin tone modifier to become separated from its associated emoji due to a line break. For more information, see:

The base `TextWrapper` class can theoretically be used to wrap text in
any context. It takes a "measurement provider" as an argument, and will
use that provider to measure text widths. The `SVGTextWrapper` is some
light glue to provide an SVG-based measurement provider to the base
`TextWrapper`, though it will likely have a few additional features in
the future.
"html-webpack-plugin": "2.28.0",
"ify-loader": "1.0.4",

This comment was marked as abuse.

@mrjacobbloom
Copy link

Does that mean the say/think blocks will probably support emojis? :o :D

@towerofnix
Copy link
Contributor

:o :D

I believe you mean 😮 😁 ? 😀

@cwillisf
Copy link
Contributor Author

🤔😁😉

@paulkaplan
Copy link
Contributor

@cwillisf we now have a test system for utilities (you can check out test/unit/util for an example). If you still want to add any tests to this, jest is pretty easy to get into, I can give you a little intro if you want.

@cwillisf
Copy link
Contributor Author

@rschamp and I agreed to close this for now and bring it back once it's being actively used. The code will live on in my fork until then...

@cwillisf cwillisf closed this Aug 14, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants