node.js - Calculate the exact size of a font glyph -



node.js - Calculate the exact size of a font glyph -

i need way find exact size , position of glyph relative bounding box.

we're using d3.js create svg heading, smaller byline , short body text. pretty much this:

lorem ipsum lorem ipsum dolor

lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua

as in example, need text left-aligned regardless of font-size.

the problem is each lines bounding box that's aligned , not glyphs. makes headings indented. how can calculate space between bounding box , glyph can correctly align text?

a colleague sat downwards , manually measured english language font, works pretty well. in adobe illustrator, need info english, chinese , standard arabic fonts. hand more or less impossible.

the solution can come type each character in canvas element , map each pixel see glyph starts , ends.

what think ideal way utilize svg font path info find extremes, way exact numbers instead of estimates. our estimates have big margin of error. there way node.js?

an illustration of svg looks like:

<svg viewbox="0,0,1008,1424" height="1052px" width="744px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(50,150)" class="container"> <g transform="translate(0,205)" class="textcontainer"> <g fill="white" font-family="serif" font-size="" class="header"> <text> <tspan y="147.7104222717285" style="" font-size="208" x="-21.8359375">lorem ipsum</tspan> </text> <text> <tspan y="201.46275431823733" style="" font-size="45" x="-4.72412109375">lorem ipsum dolor</tspan> </text> </g> <g lengthadjust="spacingandglyphs" textlength="297" fill="white" transform="translate(0,214)" font-family="sans-serif" class="paragraph" font-size="14"> <text y="16.8" x="0">lorem ipsum dolor sit down amet,</text> <text y="33.6" x="0">consectetur adipisicing elit,</text> <text y="50.4" x="0">sed eiusmod tempor</text> <text y="67.2" x="0">incididunt ut labore et dolore</text> <text y="84" x="0">magna aliqua</text> </g> </g> </g> </svg>

it x , y values on text , tspan elements need calculate, negative x values in particular. note: don't utilize serif or sans-serif font families, utilize custom font. don't think english language font created web utilize in mind. used fontsquirrel.com create svg font file.

update

svg fonts seemed logical option, since have path info in file readable in node. you'd have interpret it. found, , decided go with, opentype.js works otf , ttf fonts.

i'd still know if @ possible svg fonts.

i think may want. note requires jquery , bit hacky. may want set line-height in css object.

function glyphsize(glyph,css){ var span = $('<div>'); span.text(glyph); span.css({ display:'inline-block', position:'fixed', top:'100%' }).css(css); $('body').append(span); var out = { width:span.width(), height:span.height() } span.remove(); homecoming out; } var size = glyphsize('a',{ 'font-family':'fantasy, sans-serif' // css apply test element }); /* size = { width:7, height:20 } */

edit: quick demo here

node.js svg d3.js glyph

Comments

Post a Comment

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

php - Android app custom user registration and login with cookie using facebook sdk - i developing android application in users need register , log in using facebook. approximately, flow. open app first time, authenticate facebook, data, send info server create them business relationship in application, start session new business relationship in server, cookie perform later interactions. so far good. what need know wich info have send server, can able identify users when log in seccond time. because need start session in server , send cookie android app farther interactions. i'm using php server side language. i thinking getting getaccesstoken() in android facebook sdk, pass server on business relationship creation , storing in android app. but can't manage how login users on sec time utilize app. any suggestions ? in advance ! to uniquely identify user within app, should create request /me , user's id. guaranteed unique , remain con
Read more

django - Access session in user model .save() -

django - Access session in user model .save() - is possible access current session in user model .save()? pseudo code of want achieve: # users.models.py def save(self, *args, **kwargs): created = true if self.pk: created = false super(abstractuser, self).save(*args, **kwargs) # post-save if created: look_for_invite_in_session_and_register_if_found(self, session) seems wrong in architecture. shouldn't access request in models layer. work request must done in view. can this: user, created = abstractuser.objects.get_or_create(name=name) if created: look_for_invite_in_session_and_register_if_found(user, request.session) django session
Read more

php - .htaccess Multiple Rewrite Rules / Prioritizing -

php - .htaccess Multiple Rewrite Rules / Prioritizing - here current htaccess file: rewriteengine on rewritecond %{http_host} !^www\.website\.com [nc] rewritecond %{http_host} ([^.]+)\.website\.com [nc] rewriterule ^(.*)$ http://www.website.com/gotourl.php?urlid=?%1 [l] rewriterule ^(\w+)$ ./gotourl.php?urlid=$1 [nc,l] rewriterule ^(\w+)/$ ./gotourl.php?urlid=$1 [nc,l] the website in question url shortener i'm working on testing/developing , personal use. above code may not ideal i'm not familiar .htaccess , made via googling , testing. want url shortening aspect: http://website.com/1234 -> http://website.com/gotourl.php?urlid=1234 http://website.com/1234/ -> http://website.com/gotourl.php?urlid=1234 the problem cannot figure out how ignore directories. want specific directories go specific pages: http://website.com/img (or) http://website.com/img/ -> http://website.com/img.php http://website.com/img/1234 (or) http://website.com/
Read more