Skip to content

Commit

Permalink
MultipleUnderline class added
Browse files Browse the repository at this point in the history
  • Loading branch information
@wentin
wentin committed Dec 11, 2014
1 parent 572ca63 commit fd3cb78
Show file tree
Hide file tree
Showing 6 changed files with 225 additions and 28 deletions.
2 changes: 1 addition & 1 deletion css/underline.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
top: 0;
left: 0;
/*background-color: rgba(222, 222, 222, 0.5);*/
/*z-index: -1;*/
z-index: -1;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
Expand Down
6 changes: 3 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@
</style>
<link type="text/css" rel="stylesheet" href="css/underline.css" />
<script type="text/javascript" src="js/baseline-ratio.js"></script>
<script type="text/javascript" src="js/underline.js"></script>
<script type="text/javascript" src="js/underline-canvas.js"></script><!--
<script type="text/javascript" src="js/guitar-string.js"></script>
<script type="text/javascript" src="js/class.js"></script>
<script type="text/javascript" src="js/class.js"></script> -->

</head>

Expand All @@ -78,6 +78,6 @@
</div>
<h1 class="underline"><span>parapsychologist</span></h1>
<h1 class="tunderline">parapsychologist</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id facere iste vero quia accusamus, quisquam inventore aliquid non veritatis, Qodi repudiandae dolore. Numquam, odit, quas. Provident doloribus sapiente dolor quia porro similique pariatur sunt rem tempore nihil, quidem blanditiis unde odit officiis aspernatur mollitia, tempora atque eius optio, harum reiciendis. Ullam veniam veritatis id cum saepe et ratione exercitationem at quasi ab temporibus, nobis omnis atque, dolorem quis libero laudantium nostrum beatae ad fuga quia dolores eum dolore! <a href="#">Qeicigndis tempore, neque aut numquam fugit pariatur quidem voluptatum eligendi minus, necessitatibus mollitija? Qumquam provident rem eius non accusantium magnamsolu taistepraesentium, ipsjam magni veniam placjeat debitis suscipit corporis aspernatur assumenda, nisi voluptatibus impedit esse distinctio Qeicigndis tempore, neque aut numquam fugit pariatur qujidem voluptatum eligejndi minus, necessitatibus mollitia? Qumquam provident rem eius non accjusantium magnamsolu taistepraesentium, ipsam magni veniam placeat debitis suscipit corporis aspernatur assumenda, nisi voluptatibus impedit esse distinctio atque ea quod nihil.</a> Nam nihil a reprehenderit, deleniti consectetur Nam nihil a reprehenderit, deleniti consectetur Nam nihil a reprehenderit, deleniti consectetur a reprehenderit, deleniti consectetur <a href="#" class="tunderline">parapsychologiest</a> bitis suscipit <a href="#" class="underline">parapsychologiest</a> hic obcaecati ipsam ullam quae, atque sint. Fugiat tenetur eos asperiores totam hic accusantium blanditiis beatae nemo deleniti. Odio repudiandae minima eius est vero blanditiis iure quia quis molestiae tempore, <a href="#" class="underline">atque, fuga</a> vel nihil dolo <a href="#" class="tunderline"> atque, fuga</a> quisquam ab praesentium nihil perferendis, commodi odit, facere consequatur illum? Vero similique vel doloremque expedita corrupti architecto eligendi laborum magni eos et, quas obcaecati sed cum accusamus earum error quia. Eum, ipsa non officia dolorem, inventore necessitatibus cupiditate voluptatum enim suscipit repudiandae totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id facere iste vero quia accusamus, quisquam inventore aliquid non veritatis, Qodi repudiandae dolore. Numquam, odit, quas. Provident doloribus sapiente dolor quia porro similique pariatur sunt rem tempore nihil, quidem blanditiis unde odit officiis aspernatur mollitia, tempora atque eius optio, harum reiciendis. Ullam veniam veritatis id cum saepe et ratione exercitationem at quasi ab temporibus, nobis omnis atque, dolorem quis libero laudantium nostrum beatae ad fuga quia dolores eum dolore! <a href="#" class="underline">Qeicigndis tempore, neque aut numquam fugit pariatur quidem voluptatum eligendi minus, necessitatibus mollitija? Qumquam provident rem eius non accusantium magnamsolu taistepraesentium, ipsjam magni veniam placjeat debitis suscipit corporis aspernatur assumenda, nisi voluptatibus impedit esse distinctio Qeicigndis tempore, neque aut numquam fugit pariatur qujidem voluptatum eligejndi minus, necessitatibus mollitia? Qumquam provident rem eius non accjusantium magnamsolu taistepraesentium, ipsam magni veniam placeat debitis suscipit corporis aspernatur assumenda, nisi voluptatibus impedit esse distinctio atque ea quod nihil.</a> Nam nihil a reprehenderit, deleniti consectetur Nam nihil a reprehenderit, deleniti consectetur Nam nihil a reprehenderit, deleniti consectetur a reprehenderit, deleniti consectetur <a href="#" class="tunderline">parapsychologiest</a> bitis suscipit <a href="#" class="underline">parapsychologiest</a> hic obcaecati ipsam ullam quae, atque sint. Fugiat tenetur eos asperiores totam hic accusantium blanditiis beatae nemo deleniti. Odio repudiandae minima eius est vero blanditiis iure quia quis molestiae tempore, <a href="#" class="underline">atque, fuga</a> vel nihil dolo <a href="#" class="tunderline"> atque, fuga</a> quisquam ab praesentium nihil perferendis, commodi odit, facere consequatur illum? Vero similique vel doloremque expedita corrupti architecto eligendi laborum magni eos et, quas obcaecati sed cum accusamus earum error quia. Eum, ipsa non officia dolorem, inventore necessitatibus cupiditate voluptatum enim suscipit repudiandae totam?</p>
</body>
</html>
216 changes: 202 additions & 14 deletions js/class.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,13 @@ var getElementStyles = function(element){
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,
Expand All @@ -23,31 +30,32 @@ var getElementStyles = function(element){
fontFamily: fontFamily,
fontSize: fontSize,
fontStyle: fontStyle,
baselinePositionRatio: baselinePositionRatio
baselinePositionRatio: baselinePositionRatio,
canvasLeft: canvasLeft,
textIndent: textIndent
}
};



function SingleUnderline(element, underlineStyles) {
function SingleUnderline(element, underlineStyles, elementStyles) {
//ctor
this.element = element;

this.text = this.element.textContent;

this.underlineStyles = underlineStyles;

this.styles = getElementStyles(element);
// this.elementStyles = getElementStyles(element);
this.elementStyles = elementStyles;

this.canvas = document.createElement("canvas");
this.canvas.width = this.styles.width;
this.canvas.height = this.styles.height;
this.canvas.width = this.elementStyles.width;
this.canvas.height = this.elementStyles.height;
this.element.appendChild(this.canvas);

this.ctx = this.canvas.getContext('2d');
this.ctx.font = this.font = this.styles.fontStyle + ' '
+ this.styles.fontSize + ' '
+ this.styles.fontFamily;
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'];
Expand All @@ -67,8 +75,8 @@ function SingleUnderline(element, underlineStyles) {

// determine the text-underline-position / underlinePosition
// text-underline-position in ratio
this.underlinePosition = parseFloat(this.styles.height) *
(1 - this.styles.baselinePositionRatio
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)) {
Expand Down Expand Up @@ -99,6 +107,12 @@ SingleUnderline.prototype.clear = function(){
};


SingleUnderline.prototype.draw = function(){
// draw
this.drawUnderline();
this.drawHoles;
};

SingleUnderline.prototype.drawUnderline = function(){
// draw the underline
// console.log(text);
Expand All @@ -116,7 +130,6 @@ SingleUnderline.prototype.drawUnderline = function(){
this.myString.draw();
}


SingleUnderline.prototype.drawHoles = function(){

// draw the font stroke
Expand All @@ -129,4 +142,179 @@ SingleUnderline.prototype.drawHoles = function(){
this.ctx.lineWidth = 3 + this.strokeWidth;
this.ctx.strokeStyle = 'blue';
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.ctx = this.canvas.getContext('2d');
this.ctx.font = this.font = this.elementStyles.fontStyle + ' '
+ this.elementStyles.fontSize + ' '
+ this.elementStyles.fontFamily;


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);
}

}

MultipleUnderline.prototype.update = function(){
// update

////////////////////////
var words = this.text.split(' ');
var line = '';

var linePositionY = 0;
var firstLineCount = 0;
for(var n = 0; n < words.length; n++) {
// add the whitespace after getting the width measurement
var testLine = line + words[n];
var testLineMetrics = this.ctx.measureText(testLine);
var testLineWidth = testLineMetrics.width;
testLine = testLine + ' ';


if (!firstLineCount) {
//the first line, should consider startingPointX
if (testLineWidth + this.elementStyles.textIndent > this.elementStyles.parentWidth && n > 0) {
// draw the underline
// console.log(line);
var lineMetrics = this.ctx.measureText(line);
var lineWidth = lineMetrics.width;
this.ctx.globalCompositeOperation = "source-over";

this.ctx.strokeStyle = this.underlineStyles['text-underline-color'];
this.ctx.lineWidth = this.strokeWidth;

this.ctx.beginPath();
this.ctx.moveTo(this.elementStyles.textIndent, this.underlinePosition);
this.ctx.lineTo(lineWidth + this.elementStyles.textIndent - 4, this.underlinePosition);
this.ctx.stroke();

// draw the font stroke

this.ctx.globalCompositeOperation = "destination-out";
this.ctx.font = this.font;
this.ctx.fillStyle = 'green';
this.ctx.textBaseline = 'top';
this.ctx.fillText(line, this.elementStyles.textIndent, linePositionY);
this.ctx.lineWidth = 3 + this.strokeWidth;
this.ctx.strokeStyle = 'blue';
this.ctx.strokeText(line, this.elementStyles.textIndent, linePositionY);

line = words[n] + ' ';
linePositionY += this.elementStyles.lineHeight;
firstLineCount++;
} else {
line = testLine;
}
} else {
if (testLineWidth > this.elementStyles.parentWidth && n > 0) {
// draw the underline
var lineMetrics = this.ctx.measureText(line);
var lineWidth = lineMetrics.width;

this.ctx.globalCompositeOperation = "source-over";

this.ctx.strokeStyle = 'orangered';
this.ctx.lineWidth = this.strokeWidth;
this.ctx.beginPath();
this.ctx.moveTo(0, linePositionY + this.underlinePosition);
this.ctx.lineTo(lineWidth - 4, linePositionY + this.underlinePosition);
this.ctx.stroke();

// draw the font stroke
this.ctx.globalCompositeOperation = "destination-out";
this.ctx.font = this.font;
this.ctx.fillStyle = 'green';
this.ctx.textBaseline = 'top';
this.ctx.fillText(line, 0, linePositionY);
this.ctx.lineWidth = 3 + this.strokeWidth;
this.ctx.strokeStyle = 'blue';
this.ctx.strokeText(line, 0, linePositionY);

line = words[n] + ' ';
linePositionY += this.elementStyles.lineHeight;
} else {
line = testLine;
}
}
}
// draw the last line
// draw the underline
var lineMetrics = this.ctx.measureText(line);
var lineWidth = lineMetrics.width;
this.ctx.globalCompositeOperation = "source-over";

this.ctx.strokeStyle = 'orangered';
this.ctx.lineWidth = this.strokeWidth;
this.ctx.beginPath();
this.ctx.moveTo(0, linePositionY + this.underlinePosition);
this.ctx.lineTo(lineWidth - 4, linePositionY + this.underlinePosition);
this.ctx.stroke();

// draw the font stroke
this.ctx.globalCompositeOperation = "destination-out";
this.ctx.font = this.font;
this.ctx.fillStyle = 'green';
this.ctx.textBaseline = 'top';
this.ctx.fillText(line, 0, linePositionY);
this.ctx.lineWidth = 3 + this.strokeWidth;
this.ctx.strokeStyle = 'blue';
this.ctx.strokeText(line, 0, linePositionY);
};

MultipleUnderline.prototype.clear = function(){
// clear
// this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

};

MultipleUnderline.prototype.draw = function(){
// draw
};

1 change: 1 addition & 0 deletions js/guitar-string.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

var dist = function(x, y, x0, y0){
return Math.sqrt((x -= x0) * x + (y -= y0) * y);
Expand Down
10 changes: 5 additions & 5 deletions js/underline-canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,11 +180,11 @@ function drawText(canvas, text, x, y, maxWidth, textUnderlineDistance, lineHeigh
posY = Math.round(posY);
}

if(strokeWidth <= 1 || (strokeWidth%2 && strokeWidth > 2)) {
posY = Math.round(posY - 0.5) + 0.5;
} else {
posY = Math.round(posY);
}
// if(strokeWidth <= 1 || (strokeWidth%2 && strokeWidth > 2)) {
// posY = Math.round(posY - 0.5) + 0.5;
// } else {
// posY = Math.round(posY);
// }

var words = text.split(' ');
var line = '';
Expand Down
18 changes: 13 additions & 5 deletions js/underline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,24 @@ window.onload = function() {

var element = underlineElements[n];


var underlineStyles = {
'text-underline-color': '#fd471e',
'text-underline-position': 0.15, // could be ratio or px
'text-underline-skip': true,
'text-underline-width': 'auto' // could be auto or px or ratio
}
// debugger;
var myUnderline = new SingleUnderline(element, underlineStyles);


var elementStyles = getElementStyles(element);
// single line or multiple line?
if (elementStyles.height > elementStyles.lineHeight) {
// multiple lines
console.log('multiple lines');
var myUnderline = new MultipleUnderline(element, underlineStyles, elementStyles);
} else {
// single line
var myUnderline = new SingleUnderline(element, underlineStyles, elementStyles);
}
myUnderlines.push(myUnderline);
}
}
Expand All @@ -37,8 +46,7 @@ function animate() {
myUnderline.clear();

// draw stuff
myUnderline.drawUnderline();
myUnderline.drawHoles();
myUnderline.draw();
}


Expand Down

0 comments on commit fd3cb78

Please sign in to comment.