diff --git a/css/stylesheet.css.map b/css/stylesheet.css.map
index babaea6..2512c1e 100644
--- a/css/stylesheet.css.map
+++ b/css/stylesheet.css.map
@@ -1,6 +1,6 @@
{
"version": 3,
-"mappings": "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",
+"mappings": "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",
"sources": ["reset.scss","animation.scss","stylesheet.scss"],
"names": [],
"file": "stylesheet.css"
diff --git a/css/stylesheet.scss b/css/stylesheet.scss
index 23458ef..ad6d8a6 100644
--- a/css/stylesheet.scss
+++ b/css/stylesheet.scss
@@ -64,6 +64,7 @@ h2 {
padding-bottom: 20px;
}
p {
+ // font-family: $fira;
font-weight: 400;
font-size: 24px;
line-height: 36px;
diff --git a/index.html b/index.html
index 8a1d4f7..7a14706 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,7 @@
Buy me a coffee -->
-
+
underline.js
@@ -105,7 +105,7 @@ Contact
- Dummy text version below
+ Dummy text version below
The perfect underline should be visible, but unobstrusive — allowing people to realize what’s clickable, but without drawing too much attention to itself. It should be positioned at just the right distance from the text, sitting comfortably behind it for when descenders want to occupy the same space:
diff --git a/js/class_with_anim.js b/js/class_with_anim.js
deleted file mode 100644
index 12db6b6..0000000
--- a/js/class_with_anim.js
+++ /dev/null
@@ -1,385 +0,0 @@
-var getElementStyles = function(element){
- // lineHeight, height, ratio, fontFamily, fontSize, fontStyle
- var $this = element;
-
- var baselinePositionRatio = baselineRatio(element);
- var lineHeight = parseFloat(window.getComputedStyle($this, null)
- .getPropertyValue("line-height"));
- var fontFamily = window.getComputedStyle($this, null)
- .getPropertyValue("font-family");
- var fontSize = window.getComputedStyle($this, null)
- .getPropertyValue("font-size");
- var fontStyle = window.getComputedStyle($this, null)
- .getPropertyValue("font-style");
- var width = $this.getBoundingClientRect().width;
- var height = $this.getBoundingClientRect().height;
- var parentWidth = $this.parentNode.getBoundingClientRect().width;
-
-
- var offsetLeft = $this.offsetLeft;
- var parentOffsetLeft = $this.parentNode.offsetLeft;
- var canvasLeft = parentOffsetLeft - offsetLeft;
- var textIndent = offsetLeft - parentOffsetLeft;
-
- // canvas.style.left= canvasLeft + 'px';
- return {
- lineHeight: lineHeight,
- width: width,
- height: height,
- parentWidth: parentWidth,
- fontFamily: fontFamily,
- fontSize: fontSize,
- fontStyle: fontStyle,
- baselinePositionRatio: baselinePositionRatio,
- canvasLeft: canvasLeft,
- textIndent: textIndent
- }
-};
-
-function SingleUnderline(element, underlineStyles, elementStyles) {
- //ctor
- this.element = element;
-
- this.text = this.element.textContent;
-
- this.underlineStyles = underlineStyles;
-
- this.elementStyles = elementStyles;
- this.redrawActive = false;
-
- this.canvas = document.createElement("canvas");
- this.canvas.width = this.elementStyles.width;
- this.canvas.height = this.elementStyles.height;
- this.element.appendChild(this.canvas);
- this.canvas.width = this.canvas.clientWidth;
- this.canvas.height = this.canvas.clientHeight*1.2;
-
- this.ctx = this.canvas.getContext('2d');
- this.ctx.font = this.font = this.elementStyles.fontStyle + ' '
- + this.elementStyles.fontSize + ' '
- + this.elementStyles.fontFamily;
-
- // determine the text-underline-width / strokeWidth
- this.dotWidth = this.ctx.measureText('.')['width'];
- if (this.underlineStyles['text-underline-width'] == "auto") {
- // if set to auto, calculate the optimized width based on font
- if (this.dotWidth/6 <= 2) {
- this.strokeWidth = Math.round( this.dotWidth/3 )/2;
- } else {
- this.strokeWidth = Math.round( this.dotWidth/6 );
- }
- } else {
- //if set to px value
- this.strokeWidth = this.underlineStyles['text-underline-width'];
- //get number value
- this.strokeWidth = parseFloat(this.strokeWidth);
- }
-
- // determine the text-underline-position / underlinePosition
- // text-underline-position in ratio
- this.underlinePosition = parseFloat(this.elementStyles.height) *
- (1 - this.elementStyles.baselinePositionRatio
- + this.underlineStyles['text-underline-position']);
-
- if(this.strokeWidth <= 1 || (this.strokeWidth%2 && this.strokeWidth > 2)) {
- this.underlinePosition = Math.round(this.underlinePosition - 0.5) + 0.5;
- } else {
- this.underlinePosition = Math.round(this.underlinePosition);
- }
-
- this.textWidth = this.ctx.measureText(this.text).width;
-
- this.myString = new GuitarString(this.ctx,
- new Point(0, this.underlinePosition),
- new Point(this.textWidth, this.underlinePosition),
- this.strokeWidth, this.underlineStyles['text-underline-color']);
- this.drawHoles();
-
-}
-
-SingleUnderline.prototype.clear = function(){
- this.redrawActive = this.myString.redrawActive;
- // clear
- if(this.myString.redrawActive) {
- // this.myString.clear();
- this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
- }
-};
-
-
-SingleUnderline.prototype.update = function(){
- // update
- if(this.myString.redrawActive) {
- this.myString.update();
- // this.drawHoles();
- }
-};
-
-
-SingleUnderline.prototype.draw = function(){
- // draw
- if(this.redrawActive) {
- this.drawUnderline();
- this.drawHoles();
- }
-};
-
-SingleUnderline.prototype.drawUnderline = function(){
- // draw the underline
- this.myString.draw();
-}
-
-SingleUnderline.prototype.drawHoles = function(){
-
- // draw the font stroke
- this.ctx.font = this.font;
- this.ctx.textBaseline = 'top';
-
- this.ctx.globalCompositeOperation = "destination-out";
-
- this.ctx.fillStyle = 'green';
- this.ctx.beginPath();
- this.ctx.fillText(this.text, 0, 0);
- this.ctx.lineWidth = 3 + this.strokeWidth;
- this.ctx.strokeStyle = 'blue';
- this.ctx.beginPath();
- this.ctx.strokeText(this.text, 0, 0);
-}
-
-function MultipleUnderline(element, underlineStyles, elementStyles) {
- //ctor
- this.element = element;
-
- this.text = this.element.textContent;
-
- this.underlineStyles = underlineStyles;
-
- // this.elementStyles = getElementStyles(element);
- this.elementStyles = elementStyles;
-
- this.canvas = document.createElement("canvas");
- this.canvas.width = this.elementStyles.width;
- this.canvas.height = this.elementStyles.height;
- this.canvas.style.left = this.elementStyles.canvasLeft + 'px';
- this.element.appendChild(this.canvas);
- this.canvas.width = this.canvas.clientWidth;
- this.canvas.height = this.canvas.clientHeight + this.elementStyles.lineHeight;
-
- this.ctx = this.canvas.getContext('2d');
- this.ctx.font = this.font = this.elementStyles.fontStyle + ' ' + this.elementStyles.fontSize + ' ' + this.elementStyles.fontFamily;
-
- this.multipleRedrawActive = false;
- if (is_chrome) {
- // chrome floor the lineheight when it is not a whole number
- this.elementStyles.lineHeight = Math.floor(this.elementStyles.lineHeight);
- }
-
-
- // determine the text-underline-width / strokeWidth
- this.dotWidth = this.ctx.measureText('.')['width'];
- if (this.underlineStyles['text-underline-width'] == "auto") {
- // if set to auto, calculate the optimized width based on font
- if (this.dotWidth / 6 <= 2) {
- this.strokeWidth = Math.round(this.dotWidth / 3) / 2;
- } else {
- this.strokeWidth = Math.round(this.dotWidth / 6);
- }
- } else {
- //if set to px value
- this.strokeWidth = this.underlineStyles['text-underline-width'];
- //get number value
- this.strokeWidth = parseFloat(this.strokeWidth);
- }
-
- // determine the text-underline-position / underlinePosition
- // text-underline-position in ratio
- this.underlinePosition = parseFloat(this.elementStyles.fontSize) * 0.89;
- if (this.strokeWidth <= 1 || (this.strokeWidth % 2 && this.strokeWidth > 2)) {
- this.underlinePosition = Math.round(this.underlinePosition - 0.5) + 0.5;
- } else {
- this.underlinePosition = Math.round(this.underlinePosition);
- }
-
- this.lines = [];
- this.myStrings = [];
-
- var words = this.text.match(/[^\s-]+-?\s?/g);
- var line = '';
-
- var linePositionY = 0;
- var firstLineCount = 0;
- for (var n = 0; n < words.length; n++) {
- // add the whitespace after getting the width measurement
- if (words[n].match(/\s+$/)) {
- // the last character of words[n] is whitespace
- var newWord = words[n].replace(/\s+$/, '');
- var testLine = line + newWord;
- var testLineMetrics = this.ctx.measureText(testLine);
- var testLineWidth = testLineMetrics.width;
- testLine = testLine + ' ';
- } else {
- var testLine = line + words[n];
- var testLineMetrics = this.ctx.measureText(testLine);
- var testLineWidth = testLineMetrics.width;
- }
-
- if (!firstLineCount) {
- //the first line, should consider startingPointX
- if (testLineWidth + this.elementStyles.textIndent > this.elementStyles.parentWidth && n > 0) {
- // draw the underline
- if (line.match(/\s+$/)) {
- // the last character of line is whitespace
- var lineMetrics = this.ctx.measureText(line.replace(/\s+$/, ''));
- var lineWidth = lineMetrics.width;
- } else {
- var lineMetrics = this.ctx.measureText(line);
- var lineWidth = lineMetrics.width;
- }
-
- var tempLine = {
- lineText: line,
- lineTextIndent: this.elementStyles.textIndent,
- linePositionY: linePositionY,
- lineMeasureWidth: lineWidth
- }
- this.lines.push(tempLine)
-
- line = words[n];
- linePositionY += this.elementStyles.lineHeight;
- firstLineCount++;
- } else {
- line = testLine;
- }
- } else {
- if (testLineWidth > this.elementStyles.parentWidth && n > 0) {
- // draw the underline
- if (line.match(/\s+$/)) {
- // the last character of line is whitespace
- var lineMetrics = this.ctx.measureText(line.replace(/\s+$/, ''));
- var lineWidth = lineMetrics.width;
- } else {
- var lineMetrics = this.ctx.measureText(line);
- var lineWidth = lineMetrics.width;
- }
-
- var tempLine = {
- lineText: line,
- lineTextIndent: 0,
- linePositionY: linePositionY,
- lineMeasureWidth: lineWidth
- }
- this.lines.push(tempLine);
-
- line = words[n];
- linePositionY += this.elementStyles.lineHeight;
- } else {
- line = testLine;
- }
- }
- }
- // draw the last line
- // draw the underline
- if (line.match(/\s+$/)) {
- // the last character of line is whitespace
- var lineMetrics = this.ctx.measureText(line.replace(/\s+$/, ''));
- var lineWidth = lineMetrics.width;
- } else {
- var lineMetrics = this.ctx.measureText(line);
- var lineWidth = lineMetrics.width;
- }
-
- var tempLine = {
- lineText: line,
- lineTextIndent: 0,
- linePositionY: linePositionY,
- lineMeasureWidth: lineWidth
- }
- this.lines.push(tempLine);
-
-
-
- for(var i = 0; i < this.lines.length; i++) {
- var tempLine = this.lines[i];
- var myString = new GuitarString(
- this.ctx,
- new Point(tempLine.lineTextIndent, tempLine.linePositionY + this.underlinePosition),
- new Point(tempLine.lineTextIndent + tempLine.lineMeasureWidth, tempLine.linePositionY + this.underlinePosition),
- this.strokeWidth, this.underlineStyles['text-underline-color']);
- this.myStrings.push(myString);
- }
-
- this.drawUnderline();
- this.drawHoles();
-
-}
-
-
-MultipleUnderline.prototype.clear = function(){
- // clear
- var lastMultipleRedrawActive = this.multipleRedrawActive;
- this.multipleRedrawActive = false;
- for(var i = 0; i < this.myStrings.length; i++) {
- var tempString = this.myStrings[i];
- // this.myString.clear();
- // console.log(tempString.redrawActive);
- if(tempString.redrawActive) {
- this.multipleRedrawActive = true;
- }
- }
- // console.log(this.multipleRedrawActive);
- if (this.multipleRedrawActive) {
- console.log('clear now!')
- this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
- }
- // if (!lastMultipleRedrawActive && this.multipleRedrawActive) {
- // for(var i = 0; i < this.myStrings.length; i++) {
- // var tempString = this.myStrings[i];
- // tempString.drawLine();
- // }
- // }
-
-};
-
-MultipleUnderline.prototype.update = function(){
- //update
-};
-
-
-MultipleUnderline.prototype.draw = function(){
- // draw
- if (this.multipleRedrawActive) {
- this.drawUnderline();
- this.drawHoles();
- }
-};
-
-
-MultipleUnderline.prototype.drawUnderline = function(){
- // draw the underline
- for(var i = 0; i < this.myStrings.length; i++) {
- var tempString = this.myStrings[i];
- // tempString.clear();
- tempString.update();
- tempString.draw();
- }
-
-};
-
-
-MultipleUnderline.prototype.drawHoles = function(){
- // draw the font stroke
- for(var i = 0; i < this.lines.length; i++) {
- var tempLine = this.lines[i];
-
- this.ctx.globalCompositeOperation = "destination-out";
- this.ctx.font = this.font;
- this.ctx.fillStyle = 'green';
- this.ctx.textBaseline = 'top';
- this.ctx.fillText(tempLine.lineText, tempLine.lineTextIndent, tempLine.linePositionY);
- this.ctx.lineWidth = 3 + this.strokeWidth;
- this.ctx.strokeStyle = 'blue';
- this.ctx.strokeText(tempLine.lineText, tempLine.lineTextIndent, tempLine.linePositionY);
-
- }
-}
-
diff --git a/js/single-underline.js b/js/single-underline.js
index 651a152..c875b5c 100644
--- a/js/single-underline.js
+++ b/js/single-underline.js
@@ -66,6 +66,7 @@ function SingleUnderline(element, underlineStyles, elementStyles) {
// text-underline-position in ratio, todo: default and user set position ratio
if (this.underlineStyles['text-underline-position'] == "auto") {
// if set to auto, calculate the optimized width based on font
+ // console.log(this.elementStyles.baselinePositionRatio);
this.underlinePosition = parseFloat(this.elementStyles.height) * this.ratio
* ( 1 - this.elementStyles.baselinePositionRatio +
this.elementStyles.baselinePositionRatio * 0.4)
@@ -73,7 +74,7 @@ function SingleUnderline(element, underlineStyles, elementStyles) {
} else {
//if set to ratio value, todo: other unit such as em, px?
var userUnderlinePosition = parseFloat(this.underlineStyles['text-underline-position']);
- console.log(userUnderlinePosition);
+ // console.log(this.elementStyles.baselinePositionRatio);
this.underlinePosition = parseFloat(this.elementStyles.height) * this.ratio *
( 1 - this.elementStyles.baselinePositionRatio +
this.elementStyles.baselinePositionRatio * userUnderlinePosition)