Comments (15)
weird
this is the refined repro https://codesandbox.io/p/sandbox/fabric-vanillajs-sandbox-forked-sgy729?file=%2Fsrc%2Findex.ts%3A25%2C2
from fabric.js.
can you reduce th svg to <5 text elements
too big to debug
from fabric.js.
removed other text, with 5 elements remaining
from fabric.js.
update the repro https://codesandbox.io/p/sandbox/fabric-vanillajs-sandbox-forked-sgy729?file=%2Fsrc%2Findex.ts%3A25%2C2
from fabric.js.
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="841.92pt" height="595.32pt" viewBox="0 0 841.92 595.32">
<text xml:space="preserve" transform="matrix(1 0 -0 1 0 595.32)" font-size="5.4" font-family="Dotum"><tspan y="-422.26" x="222.02 225.14 228.26">135</tspan></text>
</svg>
I simplified the svg to the above and see the issue (or at least one of them). It looks like the text element should be able to handle tspan subelements but I don't see where Text.fromElement is handling tspan subelements. It looks like the tspan should be used to place the location of the text. This doesn't appear to be in v5 either, at least looking at the code. https://www.w3.org/TR/SVG11/text.html#TSpanElement
https://www.w3.org/TR/SVG2/text.html#TextElement
I'm also confused on why Text.fromElement is replacing dx and dy with 0 instead of reading what's in the svg. Similar with top and left from options. It looks like the v5 code would read top and left from options and set to 0 if they weren't populated but the v6 code just sets to 0.
from fabric.js.
I found this test suite: http://fabricjs.com/test/svg_import/text.html
If this was working at some point, it doesn't seem to be now... any idea when it was good?
from fabric.js.
tspan in svg import aren't supported, while should be supported in output.
from fabric.js.
Supporting TSPAN is on my old TODO list, maybe as soon as 6.0 is out i ll do it.
Is not hard and we have 'dy' in text that was built to support some math notations but is also good for tspans where appropriate.
from fabric.js.
duplicate of #1280
from fabric.js.
@asturur I'm willing to help with this. I'm just not sure what the idea would be. When a tspan appears, should that be handled in the same FabricText or do you think there may be cases where we'd be forced to use separate FabricTexts? Or is this something where we can get fancy with styling to solve the problem?
Something else I noticed is that the svg text supports arrays for the x value (and other values), so that each letter may be handled in the array (but the code assumes only the single value case). One example provided is rotate, so that you see the first couple of letters in a different rotation than the last ones. The array case is actually what's driving my same vs separate question above.
from fabric.js.
The original file is a PDF file, and the SVG obtained through MuPDF API conversion is uncertain whether MuPDF can remove tspan
from fabric.js.
@more-strive do you mind sharing an example of using MuPDF API to convert PDF to SVG?
from fabric.js.
This is the official command line
https://mupdf.readthedocs.io/en/latest/mutool-convert.html
from fabric.js.
@asturur I'm willing to help with this. I'm just not sure what the idea would be. When a tspan appears, should that be handled in the same FabricText or do you think there may be cases where we'd be forced to use separate FabricTexts? Or is this something where we can get fancy with styling to solve the problem?
Something else I noticed is that the svg text supports arrays for the x value (and other values), so that each letter may be handled in the array (but the code assumes only the single value case). One example provided is rotate, so that you see the first couple of letters in a different rotation than the last ones. The array case is actually what's driving my same vs separate question above.
I can expand on this, because i thought about it for long time, but i need time to sit down and write everything.
from fabric.js.
So if you have seen the text.fromElement
const textContent = (element.textContent || '')
.replace(/^\s+|\s+$|\n+/g, '')
.replace(/\s+/g, ' ');
We get the textContent of the Text element and we trash everything that is an html/svg tag.
What we would like to do is to parse the childNodes of that text element, divide textNodes from other kind of nodes ( opefully the others are only tspan
) and start moving tspan attributes to style properties.
This requires keeping track to what index of text a tspan starts and end using graphemes and not simple chars, so it requires also to know the full text string anyway
That would be the basic implementation.
There will be issues, like TSPAN used to look like text lines that will be a single line that gets displaced.
There are other issues like the fact that if i m not wrong text posiont after a tspan continues after the last tspan. ( i have to check the specs for layouting https://www.w3.org/TR/2006/CR-SVGMobile12-20060810/text.html#TextLayout ).
There are different level of efforts that can bring us to a nicer support and get to mostly complete support with time.
- style attributes support that aren't geometric ( color, fontFamily, fontSize.... )
- position support where it makes sense ( dx/dy/x/y/rotate)
- what else is left
There are also some decisions to take, like style does not support x/y but supports dx/dy so eventually a map between x with dx and y with dy needs to be arranged.
I'm sure you can help but i would really do some feature development instead of just ts migrations and api changes, so i m looking forward to start it
from fabric.js.
Related Issues (20)
- [Bug]: Main website SSL issue HOT 3
- [Bug]: Abort signal not propagated from loadFromJSON() to objects in Group HOT 2
- [Bug]: can not use fabricjs with web-worker HOT 7
- he controlls point is not valid, i can`t scale the size by the controlls points HOT 2
- When I apply filters on canvas Image it reduce the image width HOT 3
- [Bug]: `Group.prototype.getObjectsBoundingBox` is no longer available in version v6 rc1
- [Bug]: Textbox does not wrap word when their is no space in words. HOT 1
- [Feature]: Interaction Based on Visual Layering Order HOT 1
- [Feature]: Undo Redo for EraserBrush HOT 1
- [Bug]: hidden textarea make parent overflow hidden div scroll when editing
- CharSpacing not working with textbox object.
- [Bug]: Overwrite fabric.util.createClass for Textbox not working in latest version HOT 2
- [Bug]: CanvasEvents["object:modified"] type has incorrect properties HOT 1
- [Feature]: Group support warp like Photoshop
- [Feature]: Apply LUTs filters with .cube files to an object from canvas. HOT 4
- SerializedPatternOptions type - union instead of intersection
- [Feature]: fabircjs Exports tiff files HOT 1
- [Feature]: Is it possible to add linear-burn, linear-dodge and linear-light in blend mode? HOT 5
- [Feature]: Add a self-executing method initBehavior to FabricObject HOT 1
- [Bug]: Getting Issue with fabric.util.enlivenObjects While loading data received from database
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fabric.js.