303 lines
14 KiB
HTML
303 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<title>WebOasis - Add Line Numbers</title>
|
|||
|
|
<meta name="description" content="This text tool allows you to add sequential numbers, letters, or even roman numerals at the beginning of each line.">
|
|||
|
|
<link rel="icon" href="img/favicon.ico">
|
|||
|
|
<link rel="stylesheet" href="css/icons.css">
|
|||
|
|
<link rel="stylesheet" href="css/style.css">
|
|||
|
|
<script src="js/jquery.js"></script>
|
|||
|
|
<style>
|
|||
|
|
@font-face {
|
|||
|
|
font-family: 'Roboto';
|
|||
|
|
font-style: normal;
|
|||
|
|
font-weight: 300;
|
|||
|
|
src: url('fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
|
|||
|
|
src: local('Roboto Light'), local('Roboto-Light'),
|
|||
|
|
url('fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|||
|
|
url('fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
|
|||
|
|
url('fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
|
|||
|
|
url('fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
|
|||
|
|
url('fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
|
|||
|
|
}
|
|||
|
|
@font-face {
|
|||
|
|
font-family: 'Roboto';
|
|||
|
|
font-style: normal;
|
|||
|
|
font-weight: 400;
|
|||
|
|
src: url('fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
|
|||
|
|
src: local('Roboto'), local('Roboto-Regular'),
|
|||
|
|
url('fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|||
|
|
url('fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
|||
|
|
url('fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
|
|||
|
|
url('fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
|||
|
|
url('fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
|
|||
|
|
}
|
|||
|
|
@font-face {
|
|||
|
|
font-family: 'Roboto';
|
|||
|
|
font-style: normal;
|
|||
|
|
font-weight: 500;
|
|||
|
|
src: url('fonts/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
|
|||
|
|
src: local('Roboto Medium'), local('Roboto-Medium'),
|
|||
|
|
url('fonts/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|||
|
|
url('fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
|
|||
|
|
url('fonts/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
|
|||
|
|
url('fonts/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
|
|||
|
|
url('fonts/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<section class="navbar">
|
|||
|
|
<div class="nav-wrap">
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="#" id="app_menu" class="tooltipped tooltipped-s" aria-label="Menu"><i class="i-menu font-24"></i></a></li>
|
|||
|
|
</ul>
|
|||
|
|
<a href="index.html" class="brand"><h1><b>WebOasis Text</b></h1></a>
|
|||
|
|
<ul class="right"><a href="https://weboas.is" class="brand"><h1><b>WebOasis Homepage</b></h1></a></ul>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<div class="mask"></div>
|
|||
|
|
<nav id="nav-menu" class="clear">
|
|||
|
|
<ul class="accordion">
|
|||
|
|
<li class="title">WebOasis</li>
|
|||
|
|
<li><a href="index.html">Home</a></li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">Basic Tools</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="sort-text.html"><i class="i-sort"></i>Sort Text</a></li>
|
|||
|
|
<li><a href="convert-case.html"><i class="i-case"></i>Convert Case</a></li>
|
|||
|
|
<li><a href="find-and-replace.html"><i class="i-find_replace"></i>Find & Replace</a></li>
|
|||
|
|
<li><a href="reverse-list.html"><i class="i-reverse_list"></i>Reverse List</a></li>
|
|||
|
|
<li><a href="difference-checker.html"><i class="i-compare"></i>Difference Checker</a></li>
|
|||
|
|
<li><a href="word-count.html"><i class="i-word_count"></i>Word Count</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">Text Manipulation</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="add-prefix-suffix.html"><i class="i-prefix"></i>Add Prefix & Suffix</a></li>
|
|||
|
|
<li><a href="add-line-breaks.html"><i class="i-linebreak"></i>Add Line Breaks</a></li>
|
|||
|
|
<li><a href="remove-line-breaks.html"><i class="i-remove"></i>Remove Line Breaks</a></li>
|
|||
|
|
<li><a href="concatenate-text.html"><i class="i-combine"></i>Concatenate Text</a></li>
|
|||
|
|
<li><a href="split-text.html"><i class="i-split i-rotate-90"></i>Split Text</a></li>
|
|||
|
|
<li><a href="extract-column.html"><i class="i-column"></i>Extract Column</a></li>
|
|||
|
|
<li><a href="swap-columns.html"><i class="i-swap"></i>Swap Columns</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">Clean Text</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="remove-spaces.html"><i class="i-extra_space"></i>Remove Spaces</a></li>
|
|||
|
|
<li><a href="remove-duplicate-lines.html"><i class="i-format"></i>Remove Duplicate Lines</a></li>
|
|||
|
|
<li><a href="remove-empty-lines.html"><i class="i-line_space"></i>Remove Empty Lines</a></li>
|
|||
|
|
<li><a href="remove-diacritics.html"><i class="i-remove"></i>Remove Diacritics</a></li>
|
|||
|
|
<li><a href="remove-unwanted-characters.html"><i class="i-chars"></i>Remove Unwanted Characters</a></li>
|
|||
|
|
<li><a href="strip-html-tags.html"><i class="i-code"></i>Strip HTML Tags</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">Formatting</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="add-line-numbers.html"><i class="i-line_numbers"></i>Add Line Numbers</a></li>
|
|||
|
|
<li><a href="add-commas-to-numbers.html"><i class="i-abc i-commafy">1,234</i>Add Commas to Numbers</a></li>
|
|||
|
|
<li><a href="replace-smart-straight-quotes.html"><i class="i-quote"></i>Replace Smart/Straight Quotes</a></li>
|
|||
|
|
<li><a href="tabs-to-spaces.html"><i class="i-tab"></i>Tabs to Spaces</a></li>
|
|||
|
|
<li><a href="spaces-to-tabs.html"><i class="i-space"></i>Spaces to Tabs</a></li>
|
|||
|
|
<li><a href="pad-text.html"><i class="i-pad"></i>Pad Text</a></li>
|
|||
|
|
<li><a href="word-wrap.html"><i class="i-wrap"></i>Word Wrap</a></li>
|
|||
|
|
<li><a href="justify-text.html"><i class="i-justify"></i>Justify Text</a></li>
|
|||
|
|
<li><a href="center-text.html"><i class="i-center"></i>Center Text</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">Transform Text</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="reverse-letters.html"><i class="i-abc i-revtext">cba</i>Reverse Letters</a></li>
|
|||
|
|
<li><a href="reverse-words.html"><i class="i-swap"></i>Reverse Words</a></li>
|
|||
|
|
<li><a href="upside-down-text.html"><i class="i-abc i-flip i-rotate-180">abc</i>Upside Down Text</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">Generators</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="password-generator.html"><i class="i-lock"></i>Password Generator</a></li>
|
|||
|
|
<li><a href="filler-text.html"><i class="i-format"></i>Filler Text</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">More Tools</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="notepad"><i class="i-notepad"></i>Online Notepad</a></li>
|
|||
|
|
<li><a href="cleaner"><i class="i-notepad"></i>Text Cleaner</a></li>
|
|||
|
|
<li><a href="base64"><i class="i-notepad"></i>Base64</a></li>
|
|||
|
|
<li><a href="url"><i class="i-notepad"></i>URL</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</nav>
|
|||
|
|
<main class="wrapper padding-y">
|
|||
|
|
<div class="alert"><span class="alert-content"></span><span class="alert-x">×</span></div>
|
|||
|
|
<div class="widget w-100">
|
|||
|
|
<header class="widget-header">
|
|||
|
|
<h1>Add Line Numbers</h1>
|
|||
|
|
</header>
|
|||
|
|
<hr>
|
|||
|
|
<div class="widget-body">
|
|||
|
|
<div class="clear spacer-s">
|
|||
|
|
<div class="left hidden-xs-down">
|
|||
|
|
<div class="dropdown">
|
|||
|
|
<button type="button" class="btn btn-sm dropdown-trigger">File</button>
|
|||
|
|
<div class="dropdown-menu">
|
|||
|
|
<a href="#" id="file_new"><i class="i-file"></i> New</a>
|
|||
|
|
<span class="file-button">
|
|||
|
|
<input type="file" id="file_upload" accept=".txt">
|
|||
|
|
<label for="file_upload"><i class="i-folder"></i> Open...</label>
|
|||
|
|
</span>
|
|||
|
|
<a id="file_download"><i class="i-save"></i> Save As...</a>
|
|||
|
|
<hr>
|
|||
|
|
<a href="#" id="file_print"><i class="i-print"></i> Print</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="dropdown">
|
|||
|
|
<button type="button" class="btn btn-sm dropdown-trigger">Edit</button>
|
|||
|
|
<div class="dropdown-menu">
|
|||
|
|
<a href="#" id="edit_undo"><i class="i-undo"></i> Undo</a>
|
|||
|
|
<a href="#" id="edit_redo"><i class="i-redo"></i> Redo</a>
|
|||
|
|
<hr>
|
|||
|
|
<a href="#" id="edit_copy"><i class="i-copy"></i> Copy</a>
|
|||
|
|
<a href="#" id="edit_delete"><i class="i-close"></i> Delete</a>
|
|||
|
|
<a href="#" id="edit_select"><i class="i-select_all"></i> Select All</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right xs-100">
|
|||
|
|
<span class="left switch none spacer-r" id="upper-case">
|
|||
|
|
<input type="checkbox" id="upperCase" checked>
|
|||
|
|
<label for="upperCase">Uppercase</label>
|
|||
|
|
</span>
|
|||
|
|
<span class="left spacer-l xs-100 xs-spacer-n">
|
|||
|
|
<select id="settings" class="input-sm xs-100">
|
|||
|
|
<option value="1">Use numbers</option>
|
|||
|
|
<option value="2">Use roman numerals</option>
|
|||
|
|
<option value="3">Use letters</option>
|
|||
|
|
</select>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="w-100 clear">
|
|||
|
|
<div class="w-33 left spacer-r xs-100 xs-spacer-n" >
|
|||
|
|
<label>Number Prefix</label>
|
|||
|
|
<input id="numPrefix" type="text" value="" class="w-100">
|
|||
|
|
<p class="input-hint">Add to the left of each line number</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="w-33 left spacer-r spacer-l xs-100 xs-spacer-n" >
|
|||
|
|
<label>Start at</label>
|
|||
|
|
<input id="numStart" type="number" value="1" class="w-100">
|
|||
|
|
<p class="input-hint">Line number count begins at</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="w-33 left spacer-l xs-100 xs-spacer-n">
|
|||
|
|
<label>Number Suffix</label>
|
|||
|
|
<input id="numSuffix" type="text" value=". " class="w-100">
|
|||
|
|
<p class="input-hint">Add to the right of each line number</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<style>
|
|||
|
|
#input_output{height:418px}
|
|||
|
|
@media (max-width: 768px){
|
|||
|
|
#input_output{height:400px}
|
|||
|
|
}
|
|||
|
|
@media (max-width: 414px){
|
|||
|
|
#input_output{height:476px}
|
|||
|
|
}
|
|||
|
|
@media (max-width: 412px){
|
|||
|
|
#input_output{height:471px}
|
|||
|
|
}
|
|||
|
|
@media (max-width: 384px){
|
|||
|
|
#input_output{height:380px}
|
|||
|
|
}
|
|||
|
|
@media (max-width: 375px){
|
|||
|
|
#input_output{height:407px}
|
|||
|
|
}
|
|||
|
|
@media (max-width: 360px){
|
|||
|
|
#input_output{height:380px}
|
|||
|
|
}
|
|||
|
|
@media (max-width: 320px){
|
|||
|
|
#input_output{height:308px}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<div id="main" class="xs-spacer-n">
|
|||
|
|
<textarea id="input_output"></textarea>
|
|||
|
|
<div class="clipboard"><span class="tooltipped tooltipped-n" aria-label="Click to copy"><i class="i-copy" ></i></span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="clear">
|
|||
|
|
<div class="right xs-100 xs-left">
|
|||
|
|
<button id="addLineNum" type="button" class="btn btn-sm xs-50 xs-left">Add</button>
|
|||
|
|
<button id="clearAll" type="button" class="btn btn-sm btn-light xs-50 xs-left">Clear</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="clear w-100 margin-y">
|
|||
|
|
<article class="widget wm-100 center box-content">
|
|||
|
|
<header class="widget-header">
|
|||
|
|
<h4>About</h4>
|
|||
|
|
</header>
|
|||
|
|
<hr>
|
|||
|
|
<p>This text tool allows you to add sequential numbers, letters, or even roman numerals at the beginning of each line.</p>
|
|||
|
|
<header class="widget-header">
|
|||
|
|
<h4>Number System</h4>
|
|||
|
|
</header>
|
|||
|
|
<hr>
|
|||
|
|
<p>Add Line Numbers tool comes with three settings.</p>
|
|||
|
|
<ul>
|
|||
|
|
<li><p><strong>Number</strong> - Default setting. It adds numeric labels at the beginning of each line. It can accept both positive and negative numbers, as well as zero (0) as a starting point. The default value is one (1).</p></li>
|
|||
|
|
<li><p><strong>Roman Numerals</strong> - This adds numbers that are represented by combinations of letters from the Latin alphabet. These letters are based on seven symbols: I, V, X, L, C, D, and M. You can toggle the <code>Uppercase</code> switch to change between uppercase and lowercase numbering.</p></li>
|
|||
|
|
<li><p><strong>Letters</strong> - This adds alphabetic labels at the beginning of each line rather than numeric. The sequence and the format uses A1 reference style which is identical to the way text processing tools and spreadsheet programs like Excel would name columns, where 1 is equavalent to A. When the list reaches beyond the 26 character alphabet, it will start repeating letters. AA = 26, AB = 27, AC = 28 and so forth.</p></li>
|
|||
|
|
</ul>
|
|||
|
|
<p>Note: For Roman Numerals/Letters, you must use the roman numeral/letter equivalent when specifying the initial number count at "Start at" box. For example, 4 is equavalent to IV in roman numerals and D in letters.</p>
|
|||
|
|
<header class="widget-header">
|
|||
|
|
<h4>Basic Examples</h4>
|
|||
|
|
</header>
|
|||
|
|
<hr>
|
|||
|
|
Numbers
|
|||
|
|
<pre>1. Sample Text
|
|||
|
|
2. Sample Text
|
|||
|
|
3. Sample Text
|
|||
|
|
4. Sample Text</pre>
|
|||
|
|
Roman Numerals
|
|||
|
|
<pre>I. Sample Text
|
|||
|
|
II. Sample Text
|
|||
|
|
III. Sample Text
|
|||
|
|
IV. Sample Text</pre>
|
|||
|
|
Letters
|
|||
|
|
<pre>A. Sample Text
|
|||
|
|
B. Sample Text
|
|||
|
|
C. Sample Text
|
|||
|
|
D. Sample Text</pre>
|
|||
|
|
<header class="widget-header">
|
|||
|
|
<h4>Sort in Descending Order</h4>
|
|||
|
|
</header>
|
|||
|
|
<hr>
|
|||
|
|
<p>If you want to arrange the ordered list from the largest number to the smallest, please use the reverse function in <a href="sort-text.html">Sort Text</a> tool or use the <a href="reverse-list.html">Reverse List</a> tool.</p>
|
|||
|
|
</article>
|
|||
|
|
</div>
|
|||
|
|
<div class="toast" role="alert"><div class="toast-content"></div></div>
|
|||
|
|
</main>
|
|||
|
|
<br>
|
|||
|
|
<footer class="clear font-14">
|
|||
|
|
<div class="wrapper">
|
|||
|
|
<div class="center">© WebOasis - Text</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
<script src="js/site.js"></script>
|
|||
|
|
<script src="js/add-line-numbers.js"></script>
|
|||
|
|
<script>
|
|||
|
|
$('body').ready(function() {
|
|||
|
|
$('.accordion > li:eq(5) > a').addClass('active').next().show();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|