Status of project

[mspae]

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.

• build process to build a UMD bundle which can be consumed by including it as an npm package (disclaimer: at the bottom of this post you will see that I already implemented this :) )
• add the possibility that underlines are not rendered in a canvas but as html elements which are absolutely positioned and have a 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)
• some kind of cross browser testing to simplify development with CI
• make a build available without animation code (so animation is an opt-in choice) – I presume most use-cases don't need animation

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):

• added a package.json file
• UMDified all files in js directory
• added browserify and gulp to compile a bundle file and added an express development server to preview the demo HTML file; this boils down to the following command for development: npm run dev (starts watch task for JS, runs express server serving the html file on localhost:3000 with livereloading (you need to install the browser addon and enable it to use livereloading))
• refactored a few util functions used by both single- and multiple-underline.js into separate files which are required in the correct places, namely optimal-stroke-width-pos.js, point.js, multiply-value.js
• removed the 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 an index.js which does that and exports an Underline 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 the underlineStyles:

{
  color, // text-underline-color
  position, // text-underline-position
  skip, // text-underline-skip
  width, // text-underline-width
  animate // causes the animate function (which is a method of the Underline instance) to trigger
}

• Moved the instantiation code from underline.js into the inline JS in the demo HTML file
• Moved some audio animating code which was previously in underline.js into guitar-string.js
• Fixed some undefined variable errors which appeared because browserify compiles the code to use strict mode

Would love to hear what you think of this, Cheers!

[oyeanuj]

@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!

[mspae]

@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:

• SVG text line positioning is inconsistent across browsers
• Canvas does not support letter-spacing/word-spacing

[oyeanuj]

@mspae Sorry, I am just seeing this. What was your eventual solution here?

@wentin Any thoughts on plans for this repo?

[JamesTheHacker]

Still not on NPM. Not sure on browser support either.