forked from BufferOverflowx86/JSTypography
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjstypograph.html
274 lines (269 loc) · 28.4 KB
/
jstypograph.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="icon" type="image/png" href="favicon.ico" />
<title>
JS Типограф
</title>
<script type="text/javascript" src="jstypograph.js"></script>
<style type="text/css">
h1
{
margin-top:5px; /* Отступ сверху */
margin-left:5px; /* Отступ слева */
font-style:italic; /* Стиль текста - наклонный */
font-size: 24pt; /* Размер */
font-family:Book Antiqua, Palatino Linotype, Palatino; /* Шрифт */
color:#000000; /* Цвет */
text-align:center; /* Выравнивание посередине */
}
textarea
{
margin-left:5px; /* Отступ слева */
width:100%;
font-family:Book Antiqua, Palatino Linotype, Palatino; /* Шрифт */
font-size: 12pt; /* Размер */
}
div.text
{
font-family:Book Antiqua, Palatino Linotype, Palatino; /* Шрифт */
}
</style>
</head>
<body>
<h1>
JS Типограф
</h1>
<noscript><br>Внимание! Типограф не работает без поддержки JavaScript. Включите JavaScript в вашем браузере.<br></noscript>
<!-- код для окна типографа -->
<script type="text/javascript">
var exnum = 1;
var example1 = "В этом тексте много пробелов.\n\nПри при проверке текста обнаружились обнаружились повторяющиеся слова слова. Слова убраны.\n\nМало написать а запятые кто за тебя расставит. Я же расставлял но похоже что-то пропустил.\n\nКто то где то когда то как то что то чем то стукнул. И возможно чего нибудь бы получилось если б кто либо пришел.\n\nВ смешанных лесах встречаются разнообразные деревья, как то: береза, осина, кедр, сосна.\n\nОпять же что - то получилось, но как- то не так.\n\nВозьми ка детка молока. А коль увижу де, что казнь ему мала, повешу тут же всех судей вокруг стола. Поди кась так.\n\nКое как дошли. Кой кого встретили. Кое от кого, кое на чем, кой у кого, кое с чьим.\n\nСекретарь, хотя и чувствовал свое слабое недовольство, все таки радовался наличию таких старушек в активе района. Но хоть и велик был соблазн, я таки успел себя побороть.\n\nИз за леса величаво выплывало солнце. Из под развесистой сирени вдруг с лаем выскочила собака.\n\nПравда!? Правда!!! Неправда??? Честно?? Честно!! Проехали.. Задумчиво...\n\nНекоторые виды деревьев : ель ,сосна , берёза, дуб ; растут в наших лесах .\n\nТак бывает.И вот так...И ещё вот так!..Бывает же???Что поделать.\n\nВывод:верен.\n\n100 %\n\nТекст( ( Внутри ) скобок ).\n\n- Я пошёл домой... - Может останешься? - Нет, ухожу.\n\nЯ бы в лётчики б пошёл, пусть меня научат.\n\n3х4, 3 х 6.\n\n1/2, 1/4, 3/4, 123/432.\n\nCoca-Cola(r) - зарегистрированный товарный знак.\n\n(c) Eugene Spearance.\n\nВасяПупкин(tm).\n\nРаздобудь к утру ковёр -\nШитый золотом узор!..\nГосударственное дело, -\nРасшибись, а будь добёр!\n\n123-32.\n\ndon't.\n\n§32, §IV\n\n№15Ф, №34/25.\n\n(С) 1999-2003г., ООО \"Фирма \"Эдельвейс\". Все права защищены.\n\nОна добавила: \"И цвет мой самый любимый - \"эсмеральда\"\".\n\n10,34руб., 23тыс.долл., 64 млн.евро, 34.3€, 56$, 3,65уе.\n\nЛес, газ, нефть и тд., и т.п.. Перины, подушки в тч. подушки-думки.\n\nДанные изложены в таблице см.цветной вкладыш. Дом им.Пушкина.\n\nИнструкцию см. гл. 8, стр.34, рис.3 или илл.3.\n\nОля, Иван, Олег и др. ребята.\n\nг.Тюмень, ул.Ленина, д. 4.\n\nРазрешение 300dpi (для офсета).\n\nP.S. привет всем.\n\nP.P.S. и мне тоже.\n\nЖёлто-оранжевый цвет. Ростов-на-Дону красивый город.\n\nООО \"Фирма \"Терминал\", НИИ \"ОблСнабВротКомпот\".\n\n+7 (3452) 55-66-77, 8 905 555-55-55.\n\nГост 5773-90 - российские стандартные форматы изданий.\n\n~23,5в.\n\n123 456 789 руб. В стычке участвовало 3 200 человек.\n\nАдрес localhost - 127.0.0.1.\n\nЭто событие произошло между 1999-2001г.г., на стыке XX-XXIв.\n\nДокумент был подписан 17.02.1983г. И утратил свою силу 07.03.93 года.\n\nСобеседования состоятся 14-24 сентября, в актовом зале с 11:30-13:00.\n\nВыставка пройдёт в апреле-мае этого года.\n\nIV в до н.э, в V-VIвв до нэ., третий в. н.э.\n\nА.С.Пушкин, Пушкин А.С.\n\n...Когда В. И. Пупкин увидел в газете ( это была "Сермяжная правда" № 45) рубрику Weather Forecast(r), он не поверил своим глазам - температуру обещали +/-451F.\n\nПушкин, оценивая всех своих предшественников, писал: "... Некоторые оды Державина, несмотря на неправильность языка и неровность слога, исполнены порывами гения...".\n\nНа лесопилку завезли 32 м^3 леса, из которых 4м^3 пустили под распил на 25мм доски, длинной по 6м.";
var example2 = "- Это великая победа, Повелитель Каан. Слишком много времени прошло с тех пор, когда у ситхов была академия на Коррибане.\n- Вижу, тебе не терпится приступить к обучению новых учеников, - ответил Каан. - Надеюсь, в ближайшее время ты порадуешь меня множеством могучих и преданных адептов и Мастеров.\n- Порадует тебя? - многозначительно поинтересовался Копеж. - Не хотел ли ты сказать \"порадует нас\"? Разве не все мы часть Братства Тьмы?\nВопрос был встречен непринужденным смехом.\n- Конечно, Копеж. Я просто оговорился.\n- Копеж отказывается праздновать наш триумф, - сообщил Кордис. - Он такой уже всю ночь.\nКаан стиснул рукой дюжее плечо тви'лека.\n- Это важная победа для всех нас, - сказал он. - Коррибан значит больше, чем любой другой мир. Это символ. Место рождения ситхов. Эта победа - послание Республике и джедаям. Теперь они точно узнают нас, и затрепещут перед Братством.";
var example3 = "ГРЕЧ(w)^2+2ГРЕЧ(w)-3=0\nD=1+1x3=4\nГРЕЧ(w)=-1+/-КОРН(4)";
var example4 = "He liked being anonymous; it was one of the reasons he had settled on Coruscant. With one trillion people it was easy to blend into the crowd. That was even truer here in the Galactic Market, the most cosmopolitan section of the Republic's capital world. Merchants and shoppers of virtually every known species gathered to conduct commerce in a kaleidoscope of colors, shapes, and sizes. Red-skinned Togrutas intermingled with blue-skinned Twi'leks; diminutive Sullustans haggled with massive Hutts; fish-like Mon Calamari shared the streets with feline Cathar. Among such a diverse and interesting group, nobody paid any attention to a lone human and his astromech droid.\nUnfortunately, the lack of attention meant that many in the crowd accidentally kicked, bumped, or tripped over T3-M4 as he scooted along at Revan’s heel. The droid expressed his displeasure with a steady stream of angry beeps and chirps.\n\"Now you know why I told HK-Forty-seven he couldn't come,\" Revan told T3. \"He'd probably try to clear a path through all these 'meatbags' with a flamethrower.\"";
var example5 = "\u003cp\u003e\u003cnobr\u003eCoca-Cola\u003c/nobr\u003e\u003csup\u003e\u003csmall\u003e®\u003c/small\u003e\u003c/sup\u003e — зарегистрированный товарный знак.\u003c/p\u003e\n\n\u003c!-- В тексте попался комментарий --\u003e\n\n\u003cstyle type=\"text/css\"\u003e\n SPAN.nobr { white-space: nowrap }\n\u003c/style\u003e\n\n\u003cscript type=\"text/javascript\"\u003edocument.write('Этот текст не должен быть типографирован.')\u003c/script\u003e\n\n\u003cpre\u003e Я не хотел бы \nчтобы этот текст \nбыл форматирован.\u003c/pre\u003e\n\n\u003cp\u003eВсе, что вы хотели узнать о HTML.\u003c/p\u003e\nВ тексте встретилась ссылка: http://www.typograf.ru и e-mail: [email protected]\n* Программное обеспечение\n** Операционные системы\n### Windows XP\n### Linux RedHat\n### MacOS X\n** Текстовые редакторы\n* Компьютеры";
function SetExample() {
var el = document.getElementById("jstypo_text");
if (exnum == 1) el.value = example1;
else if (exnum == 2) el.value = example2;
else if (exnum == 3) el.value = example3;
else if (exnum == 4) el.value = example4;
else if (exnum == 5) el.value = example5;
++exnum;
if (exnum > 5) exnum = 1;
}
function untypoTag(thetag, fid, chtxt, wh, fi, tp) {
if (!fi) { fi = ''; }
var tagOpen = '<untypo>', tagClose = '</untypo>';
var el = document.getElementById("jstypo_text");
if (el.selectionStart == undefined) {
if (el.isTextEdit) {
el.focus();
var sel = document.selection;
var rng = sel.createRange();
rng.colapse;
if ((sel.type == "Text" || sel.type == "None") && rng != null) {
tagOpen += rng.text + tagClose;
}
else {
el.value += tagOpen + tagClose;
}
}
}
else {
var scr = el.scrollTop;
var txtStart = el.selectionStart;
if (!(txtStart >= 0)) {
throw 1
};
var txtEnd = el.selectionEnd;
if (el.value.substring(txtStart, txtEnd).length > 0) {
el.value = el.value.substring(0, txtStart) + tagOpen + el.value.substring(txtStart, txtEnd) + tagClose + el.value.substring(txtEnd, el.value.length);
} else {
el.value += tagOpen + tagClose;
}
el.scrollTop = scr;
}
el.focus();
}
</script>
<div align="center" style="margin-right:20px;">
<!-- Поле ввода -->
<textarea cols="100" rows="18" id="jstypo_text" name="jstypo_text"></textarea>
</div>
<!-- Настройки -->
<table BORDER="1" CELLSPACING=0 width="100%">
<tr>
<th>
Опции:
</th>
<th>
Набор правил:
</th>
<th>
Режим работы:
</th>
</tr>
<tr>
<td width="50%" style="vertical-align:top;;">
<table>
<tr>
<td width="15%" style="vertical-align:top;">
<input type="checkbox" value="on" name="spaces" id="spaces" checked><label for="spaces"> Пробелы</label><br>
<input type="checkbox" value="on" name="tabs" id="tabs" checked><label for="tabs"> Абзацы</label><br>
<input type="checkbox" value="on" name="dashs" id="dashs" checked><label for="dashs"> Тире</label>
</td>
<td width="15%" style="vertical-align:top;">
<input type="checkbox" value="on" name="chars" id="chars" checked><label for="chars"> Символы</label><br>
<input type="checkbox" value="on" name="quotes" id="quotes" checked><label for="quotes"> Кавычки</label>
<select name="qLvl" id="qLvl">
<option value="1">1</option>
<option selected value="2">2</option>
<option value="3">3</option>
</select><br>
<input type="checkbox" value="on" name="functions" id="functions" checked><label for="functions"> Функции</label>
</td>
<td width="15%" style="vertical-align:top;">
<input type="checkbox" value="on" name="br" id="br"><label for="br"> <br /></label><br />
<input type="checkbox" value="on" name="nbsp" id="nbsp" checked><label for="nbsp"> Неразрывные пробелы</label><br />
<input type="checkbox" value="on" name="nbsptabs" id="nbsptabs"><label for="nbsptabs"> Отступы для браузера</label>
</td>
<td width="15%" style="vertical-align:top;">
<input type="checkbox" value="on" name="href" id="href" checked><label for="href"> HTML Ссылки</label><br />
<input type="checkbox" value="on" name="h1" id="h1" checked><label for="h1"> HTML Заголовки</label><br />
<input type="checkbox" value="on" name="clearUntypo" id="clearUntypo"><label for="clearUntypo"> Удалять <untypo></label>
</td>
</tr>
</table>
</td>
<td width="20%">
<input type="radio" name="language" id="lang_rus" value="rus" checked><label for="lang_rus"> Русский</label><br>
<input type="radio" name="language" id="lang_eng" value="eng"><label for="lang_eng"> Английский</label>
</td>
<td width="20%">
<input type="radio" name="mode" id="mode_text" value="text" checked><label for="mode_text"> Текст</label><br>
<input type="radio" name="mode" id="mode_forum" value="forum"><label for="mode_forum"> Форум</label><br>
<input type="radio" name="mode" id="mode_html" value="html"><label for="mode_html"> HTML</label>
</td>
</tr>
</table>
<div align="right" style="margin-right:30px;margin-top:10px;">
<!-- Кнопка типографа -->
<input type="button" onclick="SetExample();" value="Пример" />
<input type="button" onclick="untypoTag();" value="<untypo>" />
<input type="button" onclick="jstypo_config();" id="typograf" value="Типографировать" />
</div>
<br>
<script type="text/javascript">
function toggleInstruction() {
var el = document.getElementById("instructions");
if (el.style.display != 'none') {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
</script>
<a href="#" onclick="toggleInstruction();return false" id="instructionsToggler" style="font-size: 16pt;">Если вы хотите установить типограф на свой сайт...</a>
<div id="instructions" class="text" style="display:none;">
<p>JSTypography — скрипт, который вы можете скачать, установить на свой сайт и привязать к любой форме ввода. К примеру, к форме ввода сообщений на форумах, добавления новостей, статей, рассказов и т. п. Так же, вы можете скачать страницу типографа и обрабатывать тексты без подключения к интернету. Размер входного текста не ограничен, что немаловажно для книг. Имеет два режима работы — вывод нормального текста и вывод текста с HTML-разметкой. Так же типограф поддерживает английские правила типографики. JSTypography имеет большой набор правил обработки, который совершенствовался в течение не одного года. Он значительно превосходит по возможностям большинство типографов, включая типограф от Лебедева, и схож по возможностям с типографом от Eugene Spearance.</p>
<p>Ссылки на скачивание:</p>
<p><a class="link" href="https://github.com/BufferOverflowx86/JSTypography" rel="nofollow" target="_blank">GitHub</a>.</p>
</div>
<br><br>
<div class="text">
При нажатии кнопки «Типографировать» ваш текст приведётся к типографскому виду. Основные возможности:
<ol>
<li>Возможность установки на любой сайт и привязки к любой форме ввода, к примеру, к форме ввода сообщения на форуме.
<li>Неограниченный размер обрабатываемого текста.
<li>Замена "Кавычек и "вложенных и даже "дважды вложенных"" кавычек" на «ёлочки», „лапки“ и ‚коготки‘.
<li>Расстановка отступов или тегов <p>. Длина отступа равна четырём пробелам. Присутствует механизм для преобразования пробелов в понятный для html вид.
<li>Замена дефисов на тире, где надо.
<li>Замена дробей на соответствующие символы.
<li>Расстановка неразрывных пробелов.
<li>Внутри тегов <untypo> текст экранируется от обработки.
<li>
Простановка отсутствующих на клавиатуре символов с помощью псеводфункций.
<ul>
<li>Функция УДАР(буква) — поставит на букву ударе́ние.
<li>Функция СТРЛ(Направление) создаст символ стрелки. Направления: В,Н,П,Л,ЛП,ВН. Так же на стрелки заменяются ->, <-, <->
<li>Функция ГРАД(цифра) для указания градусов.
<li>Функция ПАРА(Римская/арабская цифра) для параграфа
<li>Функция ЕВРО(цифра) заменится на символ евро.
<li>Функция ФУНТ(буква) заменится на символ фунта.
<li>Функция ДЮЙМ(буква) заменится на дюйм.
<li>Функция КОРН(буква,цифра) подставит корень.
<li>Функция ИНТГ(буква,цифра) заменится на интеграл.
<li>Функция ГРЕЧ(лат.буква) заменит букву из латинского алфавита на наиболее подходящую букву из греческого алфавита (которые часто используюся в математических формулах).
<li>Функция ВЕРХ[0123456789+-=()ni] переведёт содержимое в верхний индекс.
<li>
Функция НИЖН[0123456789+-=()] переведёт содержимое в нижний индекс.
<br>Все вышеописанные псевдофункции кроме СТРЛ, ГРЕЧ, ВЕРХ и НИЖН работают и без аргументов. В таком случае они заменятся на символ. К примеру, записи ГРАД(45) и 45ГРАД() идентичны и заменятся на 45°.
<br>Имена функций в английской обработке: ACNT, ARRW, DEGR, SECT, EURO, PUND, INCH, SQRT, INTG, GREK, SUPS, SUBS соответственно.
</ul>
<li>Автопростановка пробелов после знаков препинания, где присутствует однозначность.
<li>Исправление последовательности из двух или четырёх точек на многоточие.
<li>(tm), (r), (c) заменятся на ™, ® и ©.
<li>Вывод как в виде готовых символов, так и в виде html-кодов.
<li>Поддержка как русских, так и английских правил типографики.
<li>Возможность обработки лишь выделенного текста.
<li>
Операции с числами:
<ul>
<li>2x2 заменяется на 2×2;
<li>3^238 заменяется на 3²³⁸;
<li>+/- заменяется на ±;
<li>!= заменяется на ≠;
<li>~= заменяется на ≈;
<li>>=, <= заменяется на ≥, ≤;
<li>Некоторые дроби заменяются на соответствующие им символы.
</ul>
<li>Замена ' на апостроф.
<li>Исправление пунктуации, простановка дефисов в часто встречающихся ошибках.
<li>Привязка сокращений, предлогов и т. п.
<li>Удаление повторяющихся слов.
<li>Выделение из текста ссылок и почтовых ящиков (только в html).
<li>И множество других мелочей.
</ol>
Скрипт может не обрабатывать текст внутри кодов [code], [quote], <pre>, <script>, <style>, и <untypo>, не бьёт ссылки и html-коды. Скрипт не скрипт не может поставить знак тире внутри диапазонов и указаний пути: 3–5 яиц, Москва—Санкт-Петербург. Использование -- в таких случаях подразумевается. Исключениями являются диапазоны дат и времени (1999–2001 гг., XX—XXI вв., 14–24 сентября, 11:30–13:00, в апреле—мае), т. к. здесь всё однозначно.
<br><br>
Большая просьба, по всем вопросам, пожеланиям, найденным ошибкам пишите на ящик buffer.overflow.x86(собака)gmail(точка)com.
В случае желания самостоятельно исправить код Типографа, вы можете отправить pull-request.
<br><br>© Данил Ерошенко (BufferOverflow), 2018–2019 год
</div>
<!-- Инициализация типографа и его "подвес" на кнопку -->
<script type="text/javascript">
var typograph = new JsTypograph();
var button = document.getElementById('typograf');
var textArea = document.getElementById('jstypo_text');
typograph.addTextArea(textArea);
button.onclick = function () {
typograph.config.spaces = document.getElementById("spaces").checked;
typograph.config.tabs = document.getElementById("tabs").checked;
typograph.config.dashs = document.getElementById("dashs").checked;
typograph.config.chars = document.getElementById("chars").checked;
typograph.config.quotes = document.getElementById("quotes").checked;
typograph.config.functions = document.getElementById("functions").checked;
typograph.config.nbsp = document.getElementById("nbsp").checked;
typograph.config.br = document.getElementById("br").checked;
typograph.config.href = document.getElementById("href").checked;
typograph.config.h1 = document.getElementById("h1").checked;
typograph.config.href = document.getElementById("href").checked;
typograph.config.nbsptabs = document.getElementById("nbsptabs").checked;
typograph.config.clearUntypo = document.getElementById("clearUntypo").checked;
typograph.config.quotesLevel = document.getElementById("qLvl").value;
typograph.config.lang = document.getElementById("lang_rus").checked ? "rus" : "eng";
var radios = document.getElementsByName('mode');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
typograph.config.mode = radios[i].value;
break;
}
}
typograph.typography();
}</script>
</body>
</html>