Advertisement
Guest User

Untitled

a guest
Nov 7th, 2020
1,378
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.18 KB | None | 0 0
  1.  
  2. <html>
  3. <head>
  4. <title>Texthooker</title>
  5. <style type="text/css">
  6.  
  7. body {
  8.     background-color: #202020;
  9.     color: #BCBCBC;
  10.     font-size: 1.5em;
  11.     font-weight: 400;
  12.     line-height:150%;
  13.     margin-top:10%;
  14.     margin-left:10%;
  15.     margin-right:10%;
  16.     margin-bottom:20%;
  17.     font-family: "IPAGothic", "Sazanami Gothic", "Kochi Gothic", "VL Gothic", "Ume Gothic", Pro W3", "Hiragino Kaku Gothic Pro", "Osaka Mono", "Osaka", "MS Gothic", "Meiryo", "M+ 1m";
  18. }
  19.  
  20. .container {
  21.     position:fixed;
  22.     top:3px;
  23.     right:5px;
  24.     display:inline-block;
  25. }
  26.  
  27. #counter {
  28.     background-color:rgba(25,25,25,0.8);
  29.     color:#9d9d9d;
  30.     font-size:.4em;
  31.     line-height:100%;
  32.     float:left;
  33.     padding-left:8px;
  34.     padding-right:8px;
  35.     padding-top:5px;
  36.     padding-bottom:5px;
  37. }
  38.  
  39. #remove_button {
  40.     background-color:rgba(25,25,25,0.8);
  41.     color:#9d9d9d;
  42.     font-size:.4em;
  43.     line-height:100%;
  44.     float:right;
  45.     margin-right:10px;
  46.     padding-left:8px;
  47.     padding-right:8px;
  48.     padding-top:5px;
  49.     padding-bottom:5px;
  50.     cursor:pointer;
  51.     cursor:hand;
  52. }
  53.  
  54. </style>
  55. <!------------------------
  56.  
  57. To change background color or text color, just replace the style values above with the hex values for the colors you want.
  58. If you want the background of the counter to remain semi-transparent, you must use rgb values like above. The last number (where I've put 0.8) is the opacity level (1.0 = completely opaque).
  59. To change font size, just change the em value to what works for you (the standard size is 1, I like it at 1.5).
  60. To change font weight (boldness), just edit the value above.  100 is quite thin, 400 is default, 900 is quite thick.  You may want it higher than default for Mincho fonts.
  61. The line-height value changes the spacing between lines.
  62.  
  63. To use the font of your choice, remove the list of fonts above and put the ENGLISH name of your font in quotation marks (some JP font names are in Japanese, such as "三次元切絵字").
  64. Be sure to leave a semi-colon at the end of the line.
  65. To find the English name of a given font, first install it, then open Firefox.
  66. Go to about:preferences#content in the address bar, then click on the 'Default font' drop-down menu.
  67. The "correct" name of your font will be listed here - just copy that down and paste it up above.
  68.  
  69. Note that if you would like to use your browser default font, replace the font-family line with font-family:""; or delete it altogether.
  70. Your default is probably Gothic - if you want to try out a good Mincho font, try Aozora Mincho at http://www.freejapanesefont.com/aozora-mincho-download/
  71. For various other free Japanese fonts, visit http://www.freejapanesefont.com/
  72. For more font attribute information visit http://www.w3schools.com/css/css_font.asp
  73.  
  74. ------------------------>
  75. </head>
  76. <body>
  77.  
  78.  
  79.  
  80. <div class="container">
  81.  
  82. <!-- This is the div used for the "remove last line" button. -->
  83.     <div id="remove_button" title="Remove last line">x</div>
  84. <!-- End button div. -->
  85.  
  86. <!-- This is the div used for the counter. -->
  87.     <div id="counter" title="No. of characters / No. of lines">0 / 0</div>
  88. <!-- End counter div. -->
  89.  
  90. </div>
  91.  
  92.  
  93.  
  94. <!-- jQuery is needed for the page to run. You can change this to an offline version if you prefer. -->
  95. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  96.  
  97. <script>
  98.  
  99. $(document).ready(function(){
  100.  
  101. //The text inserter/scroller and the counter begin here.
  102.  
  103. //These are needed later.
  104. oldlines = 0;
  105. chars = 0;
  106.  
  107. //This listens for a node (line) to be inserted.
  108. document.addEventListener("DOMNodeInserted", function () {
  109.  
  110.   //Counter begins here. Get the current number of lines first.
  111.   var lines = document.getElementsByTagName('p').length;
  112.  
  113.   //Second, confirm whether the node insertion was a new line.
  114.   //(Rikai also inserts and removes a node (a div).)
  115.   var isnew = lines - oldlines;
  116.   if ( isnew > 0 ){
  117.       //If it is a new line, do a character count of the line and add it to the running tally.
  118.       var i=lines-1
  119.       var newline = document.getElementsByTagName('p')[i].innerHTML;
  120.       var linechars = newline.length;
  121.       newchars = chars + linechars;
  122.      
  123.       //Make the numbers look nice.
  124.       var charsdisp = newchars.toLocaleString();
  125.       var linesdisp = lines.toLocaleString();
  126.      
  127.       //Print the new counts into the counter.
  128.       jQuery('#counter').text(charsdisp+' / '+linesdisp);
  129.      
  130.       //Get ready for the next line.
  131.       oldlines = lines;
  132.       chars = newchars;
  133.      
  134.       //The counter ends here and the text-scroller is below.
  135.       //I've included it in the "if new line" statement.
  136.       //(That is, it won't run unless a new line was added.)
  137.       //Like this it won't autoscroll down every time Rikai is used.
  138.  
  139.       var LEEWAY = 200; // Amount of "leeway" pixels before latching onto the bottom.
  140.  
  141.       // Some obscene browser shit because making sense is for dweebs
  142.       var b = document.body;
  143.       var offset = b.scrollHeight - b.offsetHeight;
  144.       var scrollPos = (b.scrollTop+offset);
  145.       var scrollBottom = (b.scrollHeight - (b.clientHeight+offset));
  146.  
  147.       // If we are at the bottom, go to the bottom again.
  148.       if (scrollPos >= scrollBottom - LEEWAY) {
  149.          window.scrollTo(0,document.body.scrollHeight);
  150.       }
  151.  
  152.   }; //This is the end of the "if new line" statement.
  153.  
  154. }, false);
  155.  
  156. //End of scroller and counter script.
  157.  
  158.  
  159. //Beginning of "remove last line" script.
  160.  
  161. //Listen for click.
  162. document.getElementById("remove_button").addEventListener("click", function() {
  163.  
  164.     //Check whether there are any lines.
  165.     var remove_lines = document.getElementsByTagName('p').length;
  166.     if ( remove_lines > 0 ){
  167.    
  168.         //If there are, find the last line and do a character count.
  169.         var q = remove_lines - 1;
  170.         var last = document.getElementsByTagName('p')[q].innerHTML;
  171.         var lastlen = last.length;
  172.        
  173.         //Remove the last line.
  174.         $('body').children('p:last').remove();
  175.        
  176.         //Update the counter.
  177.         var newch = chars - lastlen;
  178.         var newchdisp = newch.toLocaleString();
  179.         var newl = oldlines - 1;
  180.         var newldisp = newl.toLocaleString();
  181.         jQuery('#counter').text(newchdisp+' / '+newldisp);
  182.        
  183.         //Prepare for next line.
  184.         chars = newch;
  185.         oldlines = newl;
  186.     };
  187. });
  188.  
  189. //End of "remove last line" script.
  190.  
  191. });
  192. </script>
  193. </body>
  194. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement