start baseline ratio

bdthemes · Jan 25, 2015 · 9872efa · 9872efa
1 parent 681ea1e
commit 9872efa
Show file tree

Hide file tree

Showing 5 changed files with 229 additions and 8 deletions.
diff --git a/baseline-ratio.html b/baseline-ratio.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="http://brick.a.ssl.fastly.net/EB+Garamond:400,400i/Open+Sans:400,700">
+    <style>
+    body {
+        margin: 0;
+        font-family: 'EB Garamond';
+        width: 5000px;
+        /* font-family: 'Dancing Script', cursive; */
+        /* font-family: 'Open Sans'; */
+
+        text-rendering: optimizeLegibility;
+        -moz-font-feature-settings: "kern=1", "liga=1", "dlig=1", "hlig=1";
+        -moz-font-feature-settings: "kern" on, "liga" on, "dlig" on, "hlig" on;
+        -webkit-font-feature-settings: "kern","liga","dlig","hlig";
+        -ms-font-feature-settings: "kern","liga","dlig","hlig";
+        font-feature-settings: "kern","liga","dlig","hlig";
+    }
+    text {
+        fill: green;
+        /*font-family: 'EB Garamond';*/
+
+         font-family: 'Dancing Script', cursive; 
+         /*font-family: 'Open Sans'; */
+    }
+    svg {
+        background-color: #ccc;
+    }
+    span {
+        width: 100%;
+        position: absolute;
+        top: 120px;
+        left: 0;
+        height: 1px;
+        background-color: red;
+    }
+    </style>
+</head>
+
+<body>
+    <span id="aline"></span>
+    <span id="dline"></span>
+    <svg width="5000" height="5000" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+        <rect x="0" y="120" width="5000" height="1" fill="red" />
+        <rect x="0" y="30" width="5000" height="1" fill="red" />
+        <text id="baseline" fill="#000000" alignment-baseline="alphabetic" stroke="#000000" stroke-width="0" x="60" y="120" font-size="15" text-anchor="">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</text>
+        <!--baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit-->
+
+        <g x="15" y="30" font-size="15" width="5000">
+            <text y="30" x="15" id="ideographic" dominant-baseline="ideographic">Mpgykjq ideographic</text>
+            <text y="30" x="115" dominant-baseline="alphabetic">Mpgykjq alphabetic</text>
+            <text y="30" x="215" dominant-baseline="hanging">Mpgykjq hanging</text>
+
+
+            <text y="30" x="315" dominant-baseline="baseline">Mpgykjq baseline</text>
+            <text y="30" x="415" id="before-edge" dominant-baseline="before-edge">Mpgykjq before-edge</text>
+            <text y="30" x="515" id="text-before-edge" dominant-baseline="text-before-edge">Mpgykjq text-before-edge</text>
+
+            <text y="30" x="615" id="middle" dominant-baseline="middle">Mpgykjq middle</text>
+            <text y="30" x="715" dominant-baseline="central">Mpgykjq central</text>
+            <text y="30" x="815" dominant-baseline="after-edge">Mpgykjq after-edge</text>
+
+            <text y="30" x="915" dominant-baseline="text-after-edge">Mpgykjq text-after-edge</text>
+            <text y="30" x="1015" dominant-baseline="ideographic">Mpgykjq ideographic</text>
+            <text y="30" x="1115" id="alphabetic" dominant-baseline="alphabetic">Mpgykjq alphabetic</text>
+
+            <text y="30" x="1215" dominant-baseline="hanging">Mpgykjq hanging</text>
+            <text y="30" x="1315" dominant-baseline="mathematical">Mpgykjq mathematical</text>
+        </g>
+    </svg>
+    <script>
+
+var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
+
+var beforeEdge = document.getElementById("text-before-edge");
+    console.log(beforeEdge.getBoundingClientRect().top);
+
+    var alphabetic = document.getElementById("alphabetic");
+    console.log(alphabetic.getBoundingClientRect().top);
+
+    var ideographic = document.getElementById("ideographic");
+    console.log(ideographic.getBoundingClientRect().top);
+
+    var middle = document.getElementById("middle");
+   console.dir(middle); console.log(middle.getBoundingClientRect().top);
+    var textHeight
+      if (is_chrome) {
+      textHeight = beforeEdge.getBoundingClientRect().top - ideographic.getBoundingClientRect().top;
+    } else {
+      textHeight = (beforeEdge.getBoundingClientRect().top - middle.getBoundingClientRect().top)*2;
+
+    }
+        var ascenderHeight = beforeEdge.getBoundingClientRect().top - alphabetic.getBoundingClientRect().top;
+        var descenderHeight = textHeight - ascenderHeight;
+
+    console.log('textHeight:' +
+        (beforeEdge.getBoundingClientRect().top - ideographic.getBoundingClientRect().top));
+
+     console.log('textHeightMiddle:' +
+        textHeight);
+
+    console.log('descenderHeight:' +
+        (alphabetic.getBoundingClientRect().top - ideographic.getBoundingClientRect().top));
+
+
+    console.log('descenderHeightMiddel:' +
+        descenderHeight);
+
+    console.log('ascenderHeight:' +
+        ascenderHeight);
+
+        var aline = document.getElementById("aline");
+    aline.style.top = (120 - ascenderHeight) + 'px';
+    dline.style.top = (120 + descenderHeight) + 'px';
+
+    </script>
+</body>
+
+</html>
diff --git a/baseline.html b/baseline.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="http://brick.a.ssl.fastly.net/EB+Garamond:400,400i/Open+Sans:400,700">
+    <style>
+    body {
+        margin: 30px;
+        font-family: 'EB Garamond';
+        /* font-family: 'Dancing Script', cursive; */
+        /* font-family: 'Open Sans'; */
+        text-rendering: optimizeLegibility;
+        -moz-font-feature-settings: "kern=1", "liga=1", "dlig=1", "hlig=1";
+        -moz-font-feature-settings: "kern" on, "liga" on, "dlig" on, "hlig" on;
+        -webkit-font-feature-settings: "kern","liga","dlig","hlig";
+        -ms-font-feature-settings: "kern","liga","dlig","hlig";
+        font-feature-settings: "kern","liga","dlig","hlig";
+    }
+    span {
+        color: black;
+        font-size: 80px;
+        /*line-height: 160px;*/
+         /*font-family: 'EB Garamond';*/
+        font-family: 'Dancing Script', cursive;
+         /*font-family: 'Open Sans';*/
+         background-color: lightyellow;
+    }
+    </style>
+</head>
+
+<body>
+    <span>ABCDEFGHIJKLMNOPQRSTUVWXYZabcoefghijklmnopqrstuvwxyz!"#$%&'()*+,-./</span>
+    <script>
+var getTextHeight = function(font) {
+
+  var text = $('<span>Hg</span>').css({ fontFamily: font });
+  var block = $('<div style="display: inline-block; width: 1px; height: 0px;"></div>');
+
+  var div = $('<div></div>');
+  div.append(text, block);
+
+  var body = $('body');
+  body.append(div);
+
+  try {
+
+    var result = {};
+
+    block.css({ verticalAlign: 'baseline' });
+    result.ascent = block.offset().top - text.offset().top;
+
+    block.css({ verticalAlign: 'bottom' });
+    result.height = block.offset().top - text.offset().top;
+
+    result.descent = result.height - result.ascent;
+
+  } finally {
+    div.remove();
+  }
+
+  return result;
+};
+var testLine = function(ctx, x, y, len, style) {
+  ctx.strokeStyle = style; 
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+  ctx.lineTo(x + len, y);
+  ctx.closePath();
+  ctx.stroke();
+};
+var font = '36pt Times';
+var message = 'Big Text';
+
+canvas = document.createElement("canvas");
+ctx = canvas.getContext('2d');
+ctx.fillStyle = 'black';
+ctx.textAlign = 'left';
+ctx.textBaseline = 'top'; // important!
+ctx.font = font;
+ctx.fillText(message, x, y);
+
+// Canvas can tell us the width
+var w = ctx.measureText(message).width;
+
+// New function gets the other info we need
+var h = getTextHeight(font);
+
+testLine(ctx, x, y, w, 'red');
+testLine(ctx, x, y + h.ascent, w, 'green');
+testLine(ctx, x, y + h.height, w, 'blue');
+
+    </script>
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -25,7 +25,7 @@
         <a href="#" class="icon-coffee">Buy me a coffee</a> -->
     </div>
     <div class="fullLogo">
-        <span class="underline">
+        <span class="underlin">
             underline.js
         </span>
     </div>

diff --git a/js/multiple-underline.js b/js/multiple-underline.js
@@ -108,7 +108,7 @@ function MultipleUnderline(element, underlineStyles, elementStyles) {
 
                 var tempLine = {
                     lineText: line,
-                    lineTextIndent: this.elementStyles.textIndent * this.ratio - 1,
+                    lineTextIndent: this.elementStyles.textIndent * this.ratio - 0.2,
                     linePositionY: linePositionY,
                     lineMeasureWidth: lineWidth
                 }
@@ -134,7 +134,7 @@ function MultipleUnderline(element, underlineStyles, elementStyles) {
 
                 var tempLine = {
                     lineText: line,
-                    lineTextIndent: -1,
+                    lineTextIndent: -0.2,
                     linePositionY: linePositionY,
                     lineMeasureWidth: lineWidth
                 }
@@ -160,7 +160,7 @@ function MultipleUnderline(element, underlineStyles, elementStyles) {
 
     var tempLine = {
         lineText: line,
-        lineTextIndent: 0,
+        lineTextIndent: -0.2,
         linePositionY: linePositionY,
         lineMeasureWidth: lineWidth
     }

diff --git a/js/single-underline.js b/js/single-underline.js
@@ -102,21 +102,20 @@ SingleUnderline.prototype.drawUnderline = function(){
 }
 
 SingleUnderline.prototype.drawHoles = function(){
-
     // draw the font stroke             
     this.ctx.font = this.font;
     this.ctx.textBaseline = 'top';
 
     this.ctx.globalCompositeOperation = "destination-out";   
 
-    this.ctx.lineWidth = 2*this.ratio + this.strokeWidth*3;
+    this.ctx.lineWidth = 2*this.ratio + this.strokeWidth*3.6;
     this.ctx.strokeStyle = 'blue';
     this.ctx.beginPath();
-    this.ctx.strokeText(this.text, -1, 0);  
+    this.ctx.strokeText(this.text, -0.2, 0);  
 
     this.ctx.fillStyle = 'green';
     this.ctx.beginPath();
-    this.ctx.fillText(this.text, -1, 0);
+    this.ctx.fillText(this.text, -0.2, 0);
 }
 
 SingleUnderline.prototype.clear = function(){