Closed alexandernst closed 3 months ago
Now you must explicitly set all font-related attributes in the <text>
element for the textWrap
function to work correctly. Back then, this decision was made consciously for performance reasons.
Now it is probably a good time to use the getComputedStyle()
function to retrieve the actual font attributes needed to calculate the text wrap.
@kumilingus is this going to make it in the next patch release (3.7.6?) or will it land in 4.0.0? If the later, is there any workaround that I can apply?
Sorry, haven't made the decision yet.
A workaround is to re-define the textWrap
attribute. It can be done per element, as shown below.
class MyRect extends joint.dia.Element {
static attributes = {
textWrap: {
qualify: joint.util.isPlainObject,
set: function(value, refBBox, node, attrs) {
const computedFontSize = parseFloat(getComputedStyle(node).fontSize);
const computedAttrs = { ...attrs };
computedAttrs.fontSize = computedFontSize;
joint.dia.attributes.textWrap.set.call(this, value, refBBox, node, computedAttrs);
}
}
};
}
Here's updated version of your codesandbox: https://codesandbox.io/s/textwrap-bug-forked-svgjq9?file=/src/index.js
Hi! I was finally able to get to this. I tried it, but it doesn't seem to be working as expected. Resizing the cell makes the text overflow the width.
The break text depends not only on the font-size, but also on font-family, font-weight, letter-spacing.
static attributes = {
textWrap: {
qualify: joint.util.isPlainObject,
set: function (value, refBBox, node, attrs) {
const computedStyles = getComputedStyle(node);
const fontSize = parseFloat(computedStyles.fontSize);
const fontFamily = computedStyles.fontFamily;
const computedAttrs = { ...attrs, fontSize, fontFamily };
joint.dia.attributes.textWrap.set.call(
this,
value,
refBBox,
node,
computedAttrs
);
}
}
};
Updated example: https://codesandbox.io/s/textwrap-bug-forked-svgjq9?file=/src/index.js
Oh, I see 🤔. I was about to ask why / how the different attributes are handled, then I remembered I can see the code 😂. I had a look at the textWrap:set
function. I see that the following attributes are taken into account when computing the width / height of the text:
I think the following extra attributes should be taken into account:
I think that only text-transform
applies to SVG.
IMHO text-shadow
does not affect the text. It only adds a shadow next to the text. But it is a matter of interpretation.
Note that there is no line-height
in SVG. It's a property that we introduced in the Vectorizer.text()
method.
Fix waits for #2335. For the time being please use the workaround.
It's currently not guaranteed that the font-size
is already set on the SVGNode (because it is a special attribute - because of calc()
). i.e. the computed style might return incorrect font size (whatever the font size is before the font-size attribute is set).
Another workaround that I've used in our project for a similar problem (body style, including font family/size/weight affected the SVG text but did not get taken into account when calculating wrapping) is to set the text attributes explicitly with references to CSS variables. For me this solved the text wrapping without being forced to duplicate values between the CSS file and the TypeScript file containing the shape definition.
E.g.
{
text: {
fontFamily: 'var(--my-body-font-family)',
fontWeight: 'var(--my-body-font-weight)',
fontSize: 'var(--my-body-font-size)',
textWrap: {
width: '97%' // padding
}
}
}
Recent versions of Bootstrap already define CSS vars, so you might be able to use them as-is.
Nice, I didn't know this is even possible: https://jsfiddle.net/kumilingus/qc9geah6/
:root {
--rect-color: red;
}
<svg>
<rect width="100" height="100" fill="var(--rect-color)" />
</svg>
I thought this was going to land in 4.0 since it's a breaking change 🤔 maybe in a future 4.x release?
The necessary breaking change was made and the issue can be fixed with a patch now (4.0.x
).
Hi @alexandernst, the fix was released as part of JointJS v4.0.2 (JointJS+ v4.0.1).
Thank you @zbynekstara !!
What happened?
It seems that textWrap isn't working as expected when using css styling. A simple repro: https://codesandbox.io/s/textwrap-bug-76f2md?file=/src/index.js
Note that commenting the bootstrap import fixes the issue.
Version
3.7.5
What browsers are you seeing the problem on?
Firefox, Chrome, Safari
What operating system are you seeing the problem on?
Mac