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

Add line-height to font styling #2115

Closed
Akos9205 opened this issue May 15, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@Akos9205
Copy link

commented May 15, 2018

Issue type

Feature request

Description of new feature

Add line-height to basic font styling possibilities:

line-height : The line height of multiline text, as a relative, unitless value. It specifies the vertical spacing between each line. With value 1 (default), the lines are stacked directly on top of one another with no additional whitespace between them. With value 2, for example, there is whitespace between each line equal to the visible height of a line of text.

Motivation for new feature

If a node label consist of multiple lines and the first line contains an underscore "" character, then it is mixed/covered with the second line, the "" character touches the text in the line below.

cyto

Example of actual usage:
The label is added the following way: node.data('label', line_1 + '\n' + line_2);
And the 'text-wrap' is set to 'wrap'.

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

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

@maxkfranz maxkfranz self-assigned this Feb 7, 2019

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

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

Add support for `line-height` style property
- This property applies to all labels for an element, like most label properties.
- Add implementation.  The rendered label height is modified by the line height, and the effective line height in pixels is stored such that the text drawing functions can just read the stored value rather than try to dynamically calculate the effective line height.
- Labels that don't have `text-wrap: wrap` set are unaffected by this change.
- Add documentation.

Ref : Add line-height to font styling #2115
@maxkfranz

This comment has been minimized.

Copy link
Member

commented Apr 24, 2019

Here is an example of the feature. Note that line-height has no effect on single line labels, i.e. values other than text-wrap: wrap. The bounds of the text are highlighted in cyan with the text-background-color. Varying line-height values are shown with example text that includes both ascenders and descenders.

text-wrap: none:

Screen Shot 2019-04-24 at 3 46 20 PM

line-height: 1:

Screen Shot 2019-04-24 at 3 43 54 PM

line-height: 1.5:

Screen Shot 2019-04-24 at 3 43 40 PM

line-height: 2:

Screen Shot 2019-04-24 at 3 44 09 PM

@maxkfranz maxkfranz closed this Apr 24, 2019

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

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

Multiline edge labels throw an exception #2386
`labelLineHeight` must be prefixed like other label values, because of source and target labels.  Using multiline labels for source and target sides of an edge doesn't generally make sense, but this change is necessary for the value for the main edge label to be distinct from the others.  This issue is caused by the addition of the line-height style property #2115.

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

Multiline edge labels throw an exception #2386
`labelLineHeight` must be prefixed like other label values, because of source and target labels.  Using multiline labels for source and target sides of an edge doesn't generally make sense, but this change is necessary for the value for the main edge label to be distinct from the others.  This issue is caused by the addition of the line-height style property #2115.
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.