-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
173 lines (164 loc) · 12.6 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>By-Typo</title>
<script src="https://cdn.jsdelivr.net/pyodide/v0.26.1/full/pyodide.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsdiff/5.2.0/diff.js"></script>
<script src="utilities_script.js"></script>
<script src="main_script.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<link href="img/sloth_icon.png" rel="icon" type="image/x-icon"/>
</head>
<body>
<div class="loading-overlay" id="loadingOverlay">
<div class="spinner"></div>
<span>Пампую правілы...</span>
</div>
<div class="container" id="mainContent">
<div class="full-header">
<div class="header-container">
<h1>By-Typo</h1>
<p class="description">Зробіць тыпаграфскую цукерку са звычайнага тэксту.
<br>Паставіць прыгожыя двукоссі, неразрыўныя прабелы і г.д.</p>
</div>
<hr class="horizontal_line">
</div>
<div class="text-areas">
<div class="input-group">
<div class="input-header">
<label for="input">Тэкст для выпраўлення:</label>
</div>
<div class="editable-div" contenteditable="true" data-placeholder="Пішы тут..." id="input"></div>
</div>
<div class="output-group">
<div class="output-header">
<label for="output">Выпраўлены:</label>
<button class="copy-button" id="copyButton">
<img alt="Copy" class="copy-icon" src="img/copy_icon.png">
Скапіраваць
</button>
</div>
<div class="editable-div" data-placeholder="Атрымлівай выйгрыш тут!" id="output"></div>
</div>
</div>
<!-- ****** DESCRIPTION PART BELOW *********** -->
<div class="footer-wrapper">
<div class="toggle-details">
<span class="toggle-text"><u>Больш пра магчымасці</u></span>
<span class="toggle-icon">▼</span>
</div>
<div class="contact-info">
<div class="info"><span class="contact-label">Сыходны код:</span><a href="https://github.com/aulasau/by-typo">github</a>
<span class="contact-label">З памылкамі сюды: </span><a href="https://twitter.com/aulasau">twitter</a><span class="separator">|</span><a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</div>
<div class="details-content" style="display: none;">
<hr class="horizontal_line">
<section>
<h3>Правілы, якія выкарыстоўвае тыпограф</h3>
<div class="pluginRules">
<div class="pluginRules__item">
<div class="pluginRules__title">Карэктар Ў</div>
<div class="pluginRules__content">
<ul class="listBlock">
<li>Замена літары <em>у</em> на <em>ў</em> у словах, дзе яна павінна ўжывацца</li>
<li>Замена літары <em>ў</em> на <em>у</em> на пачатку сказа або пасля зычных</li>
</ul>
</div>
</div>
<div class="pluginRules__item">
<div class="pluginRules__title">Двукоссі</div>
<div class="pluginRules__content">
<ul class="listBlock">
<li>Замена "простых двукоссяў" на «ялінкі» ды „лапкі" <samp>"На заінелым трамвайным акне
хтось напісау:
'Я кахаю'."</samp>
->
<samp>«На заінелым трамвайным акне
хтось напісаў:
„Я кахаю“».</samp></li>
</ul>
</div>
</div>
<div class="pluginRules__item">
<div class="pluginRules__title">Працяжнік</div>
<div class="pluginRules__content">
<ul class="listBlock">
<li>У пачатку радка або сказа, доўгі працяжнік + нераздзяляльны прабел</li>
<li>Для дыяпазонаў месяцаў і дзён тыдня выкарыстоўваем сярэдні працяжнік без прабелаў <samp>студзень–сакавік, панядзелак–субота</samp></li>
<li>Працуе і для кароткіх пазначэнняў. Іх можна паглядзець <a href="https://github.com/aulasau/by-typo/blob/master/resources/month_weekdays.txt">тут</a>. Калі ё заўвагі па скарочанай версіі месяца, напішыце<br><samp>студ–сак, пн–сб</samp></li>
<li>Унутры тэксту выкарыстоўваем нераздзяляльны прабел + доўгі працяжнік<br><samp>А геній і злачынства — дзве рэчы несумяшчальныя</samp></li>
<li>Для дыяпазонаў лічбаў выкарыстоўваем сярэдні працяжнік без прабелаў <br><samp>2002–2009, XI–XII</samp></li>
</ul>
</div>
</div>
<div class="pluginRules__item">
<div class="pluginRules__title">Пунктуацыя</div>
<div class="pluginRules__content">
<ul class="listBlock">
<li>Замена <em>!?</em> на <em>?!</em></li>
<li>Замена <em>...?</em> на <em>?‥</em> і <em>...!</em> на <em>!‥</em></li>
<li>Замена <em>?...</em> на <em>?‥</em> і <em>!...</em> на <em>!‥</em></li>
<li>Замена <em>...</em> на знак шматкроп'я …</li>
<li>Замяняем некалькі знакаў <em>? ! . , ; : -</em> на адзін <br><samp>Гатова!!! ⟶ Гатова!</samp></li>
<li>Перанос кропкі за закрываючае двукоссе/дужку</li>
</ul>
</div>
</div>
<div class="pluginRules__item">
<div class="pluginRules__title">Прабелы</div>
<div class="pluginRules__content">
<ul class="listBlock">
<li>Устаўка прабелу пасля <em>, . , : ; ! ? </em> перад наступным словам</li>
<li>Выдаленне прабелу пасля <em>« „ ( [</em></li>
<li>Выдаленне прабелу перад <em>. … : , ; ? ! » " "" ) ]</em></li>
<li>Выдаленне прабелу паміж лічбай і <em>%</em> <br><samp>23%</samp></li>
<li>Выдаленне прабелаў у пачатку і канцы радка</li>
<li>Выдаленне падвойных прабелаў</li>
<li><samp>Жывем,хлеб жуем .</samp> -> <samp>Жывем, хлеб жуем.</samp></li>
</ul>
</div>
</div>
<div class="pluginRules__item">
<div class="pluginRules__title">Нераздзяляльны прабел</div>
<div class="pluginRules__content">
<ul class="listBlock">
<li>Нераздзяляльны прабел паміж ініцыяламі і прозвішчам. Ініцыялы разам, затым нераздзяляльны прабел і прозвішча. Або прозвішча, нераздзяляльны прабел і злітна ініцыялы. <br><samp>М.І. Гарэцкі, Купала Я.</samp></li>
<!-- <li>Нераздзяляльныя прабелы паміж словам і <em>і г.д., і г.п., і інш.</em></li>-->
<li>Нераздзяляльны прабел паміж лічбай і наступным словам</li>
<li>Нераздзяляльны прабел перад <em>б, бы, ж, жа</em></li>
<li>Нераздзяляльны прабел перад апошнім кароткім словам у сказе або адзіночным радку</li>
<li>Нераздзяляльны прабел пасля кароткага слова (да 3 сымбалаў)</li>
<li>Нераздзяляльны прабел пасля прыназоўнікаў, займеннікаў, саюзаў. Увесь спіс <a href="https://github.com/aulasau/by-typo/blob/master/resources/nbsp_after_words.txt"> тут</a> </li>
<!-- <li>Нераздзяляльны прабел пасля <em>г., вобл., кр., ст., пас., в., вёс., вул., зав., пр., пр-т., просп., пл., бул., б-р, наб., ш., туп., оф., кв., пак., пад'езд., мкр., уч., ул., улад., буд., корп., літар, пав., пгт., гл., мал., іл., арт., п., c., а, б, без, быццам, бы, у, ва, вось, усё, дзе, ды, нават, для, да, калі, ёсць, яшчэ, жа, за, і, з, са, з-за, з-пад, або, ці, к, ка, як, ці, або, паміж, на, над, трэба, не, ні, але, аб, пра, каля, яно, ад, ад, перад, па, па-за, па-над, пад, пада, пасля, пры, пра, дзеля, з, са, скрозь, так, таксама, там, тым, то, тады, таго, таксама, у, хоць, хаця, чаго, праз, што, каб, гэта</em></li>-->
</ul>
</div>
</div>
<div class="pluginRules__item">
<div class="pluginRules__title">Лічбы перад знакам валюты</div>
<div class="pluginRules__content">
<ul class="listBlock">
<li>Разбіўка доўгіх лічбаў па разрадах <samp>2345123 $ ⟶ 2 345 123 $</samp></li>
<li>Пасля <em>тыс.</em> павінна быць кропка, а пасля <em>млн</em>, <em>млрд</em>, <em>трлн</em> кропкі быць не павінна <br><samp>5 тыс., 2 млн, 1 млрд, 3 трлн</samp></li>
</ul>
</div>
</div>
<div class="pluginRules__item">
<div class="pluginRules__title">Валюта</div>
<div class="pluginRules__content">
<ul class="listBlock">
<li>Замена <em>USD і EUR</em> на <em>$ і €</em> <br><samp>20usd ⟶ 20 $</samp></li>
<li>Перанос знака валюты пасля лічбаў і аддзяленне яго нераздзяляльным прабелам <br><samp>$ 109 ⟶ 109 $, 109$ ⟶ 109 $</samp></li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
</body>
</html>