Open mspae opened 8 years ago
@mspae Thanks for putting together the above comment and code.
@wentin It would be great to be able to make it into a NPM package with animation being optional. Essentially, merge the PR that @mspae is offering!
@oyeanuj Since february I have sporadically worked on something which implements this functionality.
Using canvas: https://github.com/mspae/typographic-underline-canvas
… and using SVG: https://github.com/mspae/typograpic-underline-svg
Currently neither is release-ready, but if you (or anyone else) feels like working on it, feel free to adapt/write PRs. (Note that both libs are development code and might be broken)
Problems I have run into:
@mspae Sorry, I am just seeing this. What was your eventual solution here?
@wentin Any thoughts on plans for this repo?
Still not on NPM. Not sure on browser support either.
Hey @wentin ! First off: excellent project, I have been looking for something like this for a long time.
I have delved a bit into the code and tried to adapt it to my needs. During the process I had a few thoughts I would very much like to discuss with you. I also took the liberty to implement some of the functionality mentioned. (See below)
I know it says in the
README.md
that you consider this lib to be primarily exploratory, but I think what with the browsers of today being the browsers they are (not that shitty anymore) and the CSS spec unfortunately still not including the kind of attributes you proposed, that this library could be more than just a proof-of-concept.Here are a few things I would love to see implemented and which IMHO would make this lib really useable in a production environment.
left
property corresponding to their position under the text (this kind of rendering doesn't allow for guitar string animation but may make other kinds of manipulation and customisation easier since the underlines are then stylable with CSS)So here are my changes in a nutshell (if you like I can open a pull request, you can see the commits here: https://github.com/mspae/underlineJS/commits/build-process):
npm run dev
(starts watch task for JS, runs express server serving the html file onlocalhost:3000
with livereloading (you need to install the browser addon and enable it to use livereloading))optimal-stroke-width-pos.js
,point.js
,multiply-value.js
underline.js
file which was responsible for calling either single- or multiple-underline.js functions on any element with the.underline
class – instead I added anindex.js
which does that and exports anUnderline
constructor. it receives two parameters, the first is the element (either as a DOM-element or as a selector string), the second is an options object which extends theunderlineStyles
:underline.js
into the inline JS in the demo HTML fileunderline.js
intoguitar-string.js
Would love to hear what you think of this, Cheers!