BoxMaker/index.html

﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>BoxMaker</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="jquery-1.8.2.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div id="notes">
        <h2>Some Important notes:</h2>
        <ol>
            <li>We suggest you to use <a href="http://google.com/chrome">Chrome</a> because it is faster than the others and it's images are sharper than Firefox 16 or IE9.</li>
            <li>Before doing large texts please test tesseract-ocr with small texts (box, Image) with different font size because it only has good result for specific font size and it's warnings are different for different fonts!</li>
            <li>Should be 400-450 Dpi so you should Change your Image's Dpi & size (cm) <b>without changing total pixel size number!</b> (in Photoshop > image size). Re-save your file with AcdSee to have compatible Tiff File!</li>
        </ol>
    </div>
    <h1>BoxMaker</h1>

    <p>This tool will help you to making box and image file. You should write your text in box then press the Save and the outputs will be available on /output folder (if you created that before hand).</p>
    <h2>Input text:</h2>
    <textarea spellcheck="false" id="inputText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</textarea>
    <br />
    <input type="checkbox" id="rtlMode" name="rtlMode" /><label for="rtlMode">RTL text</label>
    <br />
    <div class="label"><a href="http://www.sil.org/iso639-3/codes.asp">ISO 639-3</a> language code:</div>
    <input id="languageCode" value="per" />
    <br />
    <div class="label">Font:</div>
    <input id="font" value="arial" />
    <select id="style">
        <option value="">Normal</option>
        <option value="bold">Bold</option>
        <option value="italic">Italic</option>
        <option value="bold italic">Bold + Italic</option>
    </select>
    <br />
    Font size:
            <input type="number" value="40" id="fontSize" />px
    Space between the letters:
            <input type="number" value="5" id="letterSpacing" />px
    Height of the lines:
            <input type="number" value="1.25" id="lineHeight" />
    <br />
    <br />
    <br />
    <b>Calibrating Boxses Coordinations:</b>
    <br />
    <b>Shift:</b>
    Column 1:
            <input type="number" value="0" id="ishift" />
    Column 2:
            <input type="number" value="0" id="iishift" />
    Column 3:
            <input type="number" value="0" id="iiishift" />
    Column 4:
            <input type="number" value="0" id="ivshift" />
    <br />
    <br />

    Pages Limit:
    <input type="number" value="25" id="limit" />kb

    <br />
    Options for cursive scripts (like Arabic):
    <br />
    <input type="checkbox" id="letterByLetter" name="letterByLetter" /><label for="letterByLetter">Letter by letter</label>
    <br />
    <input type="checkbox" id="notRemoveZwj" name="notRemoveZwj" /><label for="notRemoveZwj">Don't remove the ZWJs from boxes</label>
    <br />

    <button id="button">Save!</button>
    <br />
    <br />
    <div id="pageWrapper">
        <div id="page"></div>
    </div>

    <div id="canvasWrapper">
        <canvas id="canvas"></canvas>
    </div>
</body>
</html>