search

graphicore / ufoJS

Javascript API for the Unified Font Object
lib.ufojs.org
GNU General Public License v3.0
52 stars 10 forks source link

AICB import #2

Open davelab6 opened 10 years ago

davelab6 commented 10 years ago

Similar to https://github.com/typesupply/aicbTools it would be great to be able to paste drawings from illustration applications into a ufoJS glyph object - both Inkscape and Adobe Illustrator

Pomax commented 10 years ago

I was looking at http://www.w3.org/TR/2014/WD-clipboard-apis-20140313/ for this a few weeks ago, but got distacted before implementing some testers. caniuse.com suggests this API is supported in firefox, and has partial support in chrome and IE, although no mention "how much" support that means.

graphicore commented 10 years ago

I would have to set up a test script where people who actually have illustrator could paste stuff to, so I could use the data for an implementation without owning AI. Does anyone know if there are differences between Mac and Windows in this case?

davelab6 commented 10 years ago

I can gather such test data when we get to this - its not a high priority, but worth tracking in this issue tracker

graphicore commented 10 years ago

Also, it could be worth to have such a test script to see what data other related applications provide to it, lets say: Inkscape, all outline font editors (, others)? I could set it up on ufojs.org, which I happen to have registered :)

davelab6 commented 10 years ago

Perfect! (but not a priority :)

On 7 May 2014 01:58, Lasse Fister notifications@github.com wrote:

Also, it could be worth to have such a test script to see what data other related applications provide to it, lets say: Inkscape, all outline font editors (, others)? I could set it up on ufojs.org, which I happen to have registered :)

— Reply to this email directly or view it on GitHubhttps://github.com/graphicore/ufoJS/issues/2#issuecomment-42374451 .

Cheers Dave

graphicore commented 10 years ago

Agreed.

Pomax commented 10 years ago

at least in Windows, a path copy from Adobe products yields the following clipboard object data

49161: DataObject
49880: Adobe IA3
49171: Ole Private Data

of these, 49880 is the interesting bit: it shows us that even though we're on Adobe's products version several-million, path data at least is still illustrator 3 spec. The content for that record for a random path is plain text:

%!PS-Adobe-3.0 EPSF-3.0
%%BoundingBox: 0 0 391 426
%%HiResBoundingBox: 0 0 391.4925 425.6919
%%EndComments
%%BeginProlog
%%EndProlog
%%BeginSetup
%%EndSetup
%Adobe_Photoshop_Path_Begin:<< /defaultFill false >>
*u
%AI3_Note:<< /operation /xor /defaultFill false >>
1 XR
97.7981 201.5961 m
58.3489 286.1945 117.5977 284.3946 v
176.8466 282.5946 206.9960 261.4450 217.7958 236.6955 c
228.5956 211.9459 269.8448 193.6463 289.4945 223.4957 c
N
*U
%Adobe_Photoshop_Path_End
%%Trailer
%%EOF

Parsing and forming this kind of data is pretty trivial.

Inkscape dumps a whole slew of data in the clipboard on a simple path copy, putting several data formats in there, the most useful being a 49520 image/svg+xml object. For a random path:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   width="439.54971"
   height="395.98813"
   id="svg3009">
  <metadata
     id="metadata3015">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs3013" />
  <inkscape:clipboard
     max="509.55703,811.92857"
     min="70.007304,415.94045"
     style="color:#000000;fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
     id="clipboard3017" />
  <path
     d="M 207.13556,0.5 C 118.56413,77.64286 -92.864447,69.07143 47.135556,214.78572 187.13556,360.5 358.56413,457.64286 367.13556,349.07143 375.70699,240.5 504.27841,163.35714 395.70699,146.21429 c -108.57143,-17.14286 -160,102.85714 -160,102.85714"
     id="path2985"
     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</svg>

(data obtained using the insanely useful ClipView, which is a 2003 utility from www.peterbuettner.de =)

graphicore commented 10 years ago

Thanks. The first one is like the EPS that we maybe are going to consume with metapolator from metapost anyways. Getting the path data from an SVG path element is also doable, since we have XML Parsers in the browsers and ufoJS has one for nodeJS, too :-)