javascript - Sharing baseline between canvas text and html element -

-

i'm drawing text html canvas element, , next text have plain css-styled , absolutely positioned html button, position computed javascript. i'd use same font both, seems easy, , i'd both share same baseline. which, far can tell, hard @ moment, @ least given set of constraints i'm facing.

  • out of box, canvas-drawn text uses textbaseline = 'alphabetic', , can't change (for compatibility reasons , basline-aligned text using different fonts within canvas). on other hand, absolute positioning on html element uses top or bottom margin, not baseline.
  • the textmetrics documentation on mdn describes various vertical measurements, points out available on chrome , there after flag has been set. need works on decent percentage (say >80%) of current browsers.
  • i don't know font used, hard-coding metric information font not option.

so options have?

  1. do have render font second off-screen canvas , examine pixel data in order find actual dimensions? can trust these actual dimensions, computed marked pixel on canvas, match dimensions used compute size of button of more artistic fonts?

  2. do need resort spacer image? way, main difference between question , that one fact i'm doing positioning in javascript, don't need pure css solution, , can use canvas can give me.

  3. is there other (i.e. without spacer image) way leverage vertical-align css property, creating outer box well-defined baseline , nesting button inside aligned same baseline?

  4. any other direction take?

you have added metrics differ depending on different browser's text render engine.

text difficult , not easy right without low-level metrics. , state available in chrome under experimental flags.

  1. any other direction take?

you can read , parse fonts manually , obtain metrics that. there this (font.js) solution this 1 (opentype.js) doing that. in turn though limit types of fonts can use.

the other approach create button using second canvas element. can still receive click events etc. have same conditions font in main canvas.


Comments

Post a Comment

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

-
creating wordpress website , i'm getting following php error: parse error: syntax error, unexpected 'endforeach' (t_endforeach) in /home/soralmedia/public_html/wp-content/themes/soral media/woocommerce/myaccount/my-orders.php on line 98 here's code file: <?php /** * orders * * shows recent orders on account page. * * template can overridden copying yourtheme/woocommerce/myaccount/my-orders.php. * * however, on occasion woocommerce need update template files , (the theme developer). * need copy new files theme maintain compatibility. try this. * little possible, happen. when occurs version of template file will. * bumped , readme list important changes. * * @see http://docs.woothemes.com/document/template-structure/ * @author woothemes * @package woocommerce/templates * @version 2.5.0 */ if ( ! defined( 'abspath' ) ) { exit; } $my_orders_columns = apply_filters( 'woocommerce_my_account_my_orders_columns', array( ...
Read more

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

-
i new vba have developed code use in excel move text/numbers txt file. issue have 3 functions need go same txt file. when run first function has set fs = createobject("scripting.filesystemobject") set = fs.createtextfile(module1.nys45uploadfilename, true) a.writeline (str) a.close. the other 2 functions had save. set fs = createobject("scripting.filesystemobject") set = fs.savetextfile(module1.nys45uploadfilename, true) a.writeline (str) a.close. the first function go txt file, other 2 error object doesn't support property or method. when changed 3 create last function goes txt file. can not figure out word use in order make other 2 functions follow txt file in order keyed. the entire code follows private sub addrecord_click() on error goto errhandler module1.nys45uploadfilename = application.getsaveasfilename(filefilter:="textfiles (*.txt), *.txt") if module1.nys45uploadfilename = "false" exit sub ...
Read more

Using django-mptt to get only the categories that have items -

-
sample structure: all uppercase: category mixed case: item root ├── books │   ├── fiction │   │   └── classics │   └── non-fiction ├── clothing └── electronics ├── laptops ├── phones │   ├── apple │   │   ├── iphone 6 │   │   ├── iphone 6 plus │   │   ├── iphone 6s │   │   └── iphone 6s plus │   ├── motorola │   │   ├── moto g4 │   │   ├── moto g4 play │   │   ├── moto g4 plus │   │   └── moto x │   └── samsung └── tablets └── apple i'm trying have index page show "electronics" category. "clothing" category shouldn't show since it's empty , "books" category shouldn't show either since, although has child categories, child categories don't have items. similarly, "electronics" page should show "phones" category. "laptops" category shouldn't show since it's empty , "tablets" category shouldn't show either since...
Read more