char & byte count, different ratio

Author: xem

index.html

@@ -5,9 +5,10 @@
 <style>
 *{margin:0;padding:0;border:0;box-sizing:border-box;vertical-align:middle}
 html,body{height:100%;font:12px arial}
-.CodeMirror,#iframe{width:50%;height:100%;float:left;transition:.5s}
-#iframe{border-left:1px solid}
-#toggle{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:50;transition:.5s}
+#code,.CodeMirror,#iframe{height:100%;float:left;transition:.5s}
+#code,.CodeMirror{width:40%}
+#iframe{border-left:1px solid;width:60%}
+#toggle{position:fixed;bottom:0;left:40%;transform:translateX(-50%);z-index:50;transition:.5s}
 #toggle:checked{bottom:170px;transform:translateX(-50%) translateY(50%)}
 #menu{position:fixed;bottom:-170px;height:170px;width:100%;border-top:1px solid;z-index:2;transition:.5s}
 #toggle:checked~#menu{bottom:0}
@@ -68,6 +69,13 @@
   console.old_clear();
 }
 
+// Count chars
+count_chars=function(b,a,c,d){a=[];for(c=0;c<b.length;c++)54==(b[d="charCodeAt"](c)>>10)?(a.push(1024*(b[d](c)-55296)+b[d](c+1)+9216),c++):a.push(b[d](c));return a.length}
+
+// Count UTF-8 bytes
+count_bytes=function(b,a,c,d,n){a=[];for(c=0;c<b.length;c++)128>b[d="charCodeAt"](c)?a.push(b[d](c)):(n=b[c],55296==(b[d](c)&64512)&&(n=b.substr(c,2),c++),encodeURI(n).replace(/\w+/g,function(b){a.push(parseInt(b,16))}));return a.length}
+
+
 // Read hash
 if(location.hash){
   code.value=decodeURIComponent(location.hash.slice(1));
@@ -85,15 +93,15 @@
 download.href="data:text/html,"+encodeURIComponent(editor.getValue());
 
 // Update count
-document.title=input.length+" chars - Codegolf IDE";
+document.title=count_chars(input)+" chars / "+count_bytes(input)+" bytes - Codegolf IDE";
 
 // After typing code, clear console and update iframe and export link
 editor.on("keyup",function(){
   console.clear();
   input=editor.getValue();
   iframe.srcdoc=custom_console+editor.getValue();
   download.href="data:text/html,"+encodeURIComponent(input);
-  document.title=input.length+" chars - Codegolf IDE";
+  document.title=count_chars(input)+" chars / "+count_bytes(input)+" bytes - Codegolf IDE";
 });
 
 // Save