javascript - Manual SVG text rendering using svg.js + glyphs pulled from SVG font -

-

i working on project have create design assets dynamically in browser. past few months have been using canvas this, being asked if can create vector based assets directly client.

after investigating html5 svg, seems might able this, , after playing around raphael.js , svg.js, decided svg.js better. more lightweight, , < ie9 support not issue me.

my main concern using svg have render text svg's, , have text vector based , available in final asset. not this, need able measure text's bounding area (to nearest pixel). in see 2 problems:

  • just using standard draw.text() call create <text> element no means must bundle font asset, not possible due licensing reasons.

  • calling text.bbox() bounding area of text element inaccurate when comes height. believe returns height tallest/lowest characters in font rather characters being used, getclientrect() standard html elements.

i see solution solve these problems, , looking advice:

i believe manually render glyphs using draw.path() path information pulled svg font. way final asset have vector based glyphs in not tied font, , call bbox() after drawing path more accurate text.

does know if possible pull of glyph information using svg.js? or must manually parsing xml , pulling path information out of there? have idea on how kerning potentially work in situation? or better know other way of solving problems 1 & 2 above without doing manual , complicated method?

i've taken half hearted attempt @ before, indeed possible not straightforward. extract information font svg font xml need to...

document.queryselector("glyph[unicode=a]").getattribute("d");

this path of letter a. however, path in different coordinate system, w3c:

unlike standard graphics in svg, initial coordinate system has y-axis pointing downward (see initial coordinate system), design grid svg fonts, along initial coordinate system glyphs, has y-axis pointing upward consistency accepted industry practice many popular font formats.

this means have transform coordinates 1 system other (this in shouldn't hard) , scale desired size

then must paint next letter after first one, there's horiz-adv-x attribute of glyphs must scale according text size. though svg fonts account kerning, in practice none of browser engines support svg text implement it, spacing doesn't vary according glyph pairs.

depending on specific requirements process can go easy nightmarish. can end implementing mini-text rendering engine if scope creeps up.


Comments

Post a Comment

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

-
i use sonar plugin executes if activated in maven profile. sonar runs on every compile. the problem build fail other team members not have sonar application installed locally. pom.xml checked in team members same copy including sonar configuration, don't want them modify purpose of disabling sonar (they might inadvertently check modified copy in). please advise how configure maven (.m2/settings.xml) and/or pom.xml sonar feature can enabled/disabled local profile. here sonar configuration in each project's pom.xml: <plugin> <groupid>org.codehaus.mojo</groupid> <artifactid>sonar-maven-plugin</artifactid> <version>1.0</version> <executions> <execution> <id>make-sonar</id> <phase>compile</phase> <goals> <goal>sonar</goal> </goals> </execution> </executions> ...
Read more

python - TypeError: can only concatenate tuple (not "float") to tuple -

-
i'm new python, question might easy, anyway, patience: as trying call newton-raphson method calculate implied volatility in black-scholes formula call/put option pricing, first thing is, newton method in scipy.optimize seems calculate function's zeros, in black-scholes formula, want function's value option price, not zero. (i'm new here programming, i'm not sure techniques.) should write function things like: def f(sigma, price): return bsformula(s0,k,r,t,q,sigma) - price then, while calling newton method, takes args=() 1 parameter in function, write this: value = newton(bsprice2, 0.5, args=price) but error message: file "bs.py", line 36, in bsimpvol value = newton(bsprice2, 0.5, args=float(price)) file "/usr/lib/python2.7/dist-packages/scipy/optimize/zeros.py", line 143, in newton q0 = func(*((p0,) + args)) typeerror: can concatenate tuple (not "float") tuple could tell me why that? how fix it? apprecia...
Read more

java - What is the difference between String. and String.this. ? -

-
this question has answer here: meaning of .this , .class in java 2 answers i'll straight point. im still learning bit of syntax , want know difference between code is code a: public class buttonz extends jbutton{ public buttonz(){ settext(new string(string.valueof(i))); } } please ignore fact i undeclared, not lost. code b: public class buttonz extends jbutton{ public buttonz(){ settext(new string(string.this.charat(i))); } } what don't yet understand difference in typing string.this , string. i under assumption when use dot operator on class accessing it's static methods(and/or variables if they're not hidden). i have studied little bit , have concluded when using string. accessing string static methods.. when using string.this. i'm accessing methods class buttonz extendi...
Read more