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

`text-overflow-wrap: whitespace | anywhere` #2119

Closed
weirdalsuperfan opened this issue May 21, 2018 · 5 comments

Comments

Projects
None yet
2 participants
@weirdalsuperfan
Copy link

commented May 21, 2018

Issue type

Feature request

Specification

text-overflow-wrap : The characters that may be used for possible wrapping locations when a line overflows text-max-width; may be whitespace (default) or anywhere. Note that anywhere is suited to CJK, where the characters are in a grid and no whitespace exists. Using anywhere with text in the Latin alphabet, for example, will split words at arbitrary locations.

Motivation

See OP below:

--

Issue type

Bug report

Environment info

  • Cytoscape.js version : 3.1.4
  • Browser/Node.js & version : Chrome Browser Version 66.0.3359.117 (Official Build) (64-bit)

Current (buggy) behaviour

Japanese, or other text without spaces, won't wrap even with 'text-wrap' or 'overflow-wrap' or 'word-break' set

Desired behaviour

Wrap after text-max-width even without spaces, or at least follow word-break CSS.

Minimum steps to reproduce
http://jsbin.com/yikurinezu/edit?html,css,js,output

@maxkfranz

This comment has been minimized.

Copy link
Member

commented May 28, 2018

The docs aren't clear on this point, but word wrapping is only allowed on whitespace. If you have no whitespace, there is no opportunity for wrapping.

You can use manual newlines to indicate where wrapping should occur. Or you can provide possible break points with whitespace characters like ' ' or '\t'.

If you want to automatically break on non-whitespace characters (i.e. by a style property), that would require a new feature for some future non-patch release.

@maxkfranz maxkfranz added this to the future milestone May 31, 2018

@maxkfranz maxkfranz changed the title Text without spaces doesn't wrap New style property to force text wrapping on non-whitespace characters May 31, 2018

@maxkfranz maxkfranz modified the milestones: future, 3.5.0 Feb 7, 2019

@maxkfranz maxkfranz self-assigned this Feb 7, 2019

@maxkfranz

This comment has been minimized.

Copy link
Member

commented Feb 7, 2019

Proposal :

text-wrap: anywhere : Wrap on manual newline characters, or wrap on any character beyond text-max-width.

This should work for languages that don't use much if any whitespace.

@maxkfranz maxkfranz modified the milestones: 3.5.0, 3.6.0 Feb 26, 2019

@maxkfranz

This comment has been minimized.

Copy link
Member

commented Mar 7, 2019

Similar to #2329, you should probably be using zero-width spaces between characters where you'd like to enable wrapping.

I suppose an implementation of text-wrap: anywhere would just put '\u200b' between every character in your input string, but you should be able to do that in your code in the same way using a style mapper function.

@maxkfranz

This comment has been minimized.

Copy link
Member

commented Mar 7, 2019

Note that breaking on zero-width spaces is currently not supported, since it's not included in \s.

@maxkfranz

This comment has been minimized.

Copy link
Member

commented Apr 5, 2019

Screen Shot 2019-04-05 at 5 48 00 PM

This is pretty much the best it can be with an anywhere value. Note, however, that punctuation or other symbols can not be taken into account. There are too many languages to consider. In the example above, the end parenthesis isn't well placed on the fifth line.

To have more control over where breaking happens, you'll have to use zero-width spaces as hints in your text at appropriate locations -- e.g. not before ")".

@maxkfranz maxkfranz changed the title New style property to force text wrapping on non-whitespace characters `text-overflow-wrap: whitespace | anywhere` Apr 8, 2019

maxkfranz added a commit that referenced this issue Apr 8, 2019

`text-overflow-wrap: whitespace | anywhere` #2119
- Add property
- Add documentation
- Change some renderer code from `var` to `let`

@maxkfranz maxkfranz closed this Apr 24, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.