Baseline Widely available
HTML-ÑÐ»ÐµÐ¼ÐµÐ½Ñ <pre>
пÑедÑÑавлÑÐµÑ Ñобой пÑедваÑиÑелÑно оÑÑоÑмаÑиÑованнÑй ÑекÑÑ, коÑоÑÑй должен бÑÑÑ Ð¿ÑедÑÑавлен ÑоÑно Ñак, как напиÑано в HTML-Ñайле. ТекÑÑ Ð¾Ð±ÑÑно оÑобÑажаеÑÑÑ Ñ Ð¸ÑполÑзованием непÑопоÑÑионалÑного ("monospace") ÑÑиÑÑа. ÐÑÐ¾Ð±ÐµÐ»Ñ Ð²Ð½ÑÑÑи ÑÑого ÑлеменÑа оÑобÑажаÑÑÑÑ ÐºÐ°Ðº запиÑаннÑе.
<pre>
L TE
A A
C V
R A
DOU
LOU
REUSE
QUE TU
PORTES
ET QUI T'
ORNE O CI
VILISÃ
OTE- TU VEUX
LA BIEN
SI RESPI
RER - Apollinaire
</pre>
pre {
font-size: 0.7rem;
margin: 0;
}
ÐÑÑибÑÑÑ
ÐÑÐ¾Ñ ÑÐ»ÐµÐ¼ÐµÐ½Ñ Ð²ÐºÐ»ÑÑÐ°ÐµÑ Ð² ÑÐµÐ±Ñ ÑолÑко глобалÑнÑе аÑÑибÑÑÑ.
cols
Ðе ÑÑандаÑÑно
СодеÑÐ¶Ð¸Ñ Ð¿ÑедпоÑÑиÑелÑное колиÑеÑÑво Ñимволов, коÑоÑое должна имеÑÑ ÑÑÑока. ÐÑо бÑл неÑÑандаÑÑнÑй Ñиноним width
. ЧÑÐ¾Ð±Ñ Ð´Ð¾Ð±Ð¸ÑÑÑÑ Ñакого ÑÑÑекÑа, иÑполÑзÑйÑе CSS width
.
width
СодеÑÐ¶Ð¸Ñ Ð¿ÑедпоÑÑиÑелÑное колиÑеÑÑво Ñимволов, коÑоÑое должна имеÑÑ ÑÑÑока. ХоÑÑ ÑеÑ
ниÑеÑки он вÑе еÑÑ Ñеализован, ÑÑÐ¾Ñ Ð°ÑÑибÑÑ Ð½Ðµ Ð¸Ð¼ÐµÐµÑ Ð²Ð¸Ð·ÑалÑного ÑÑÑекÑа; ÑÑÐ¾Ð±Ñ Ð´Ð¾ÑÑиÑÑ Ñакого ÑÑÑекÑа, иÑполÑзÑйÑе CSS width
.
wrap
Ðе ÑÑандаÑÑно
ÐодÑказка, ÑказÑваÑÑаÑ, как должен пÑоиÑÑ
одиÑÑ Ð¿ÐµÑеноÑ. Ð ÑовÑеменнÑÑ
бÑаÑзеÑаÑ
ÑÑÐ¾Ñ Ð°ÑÑибÑÑ Ð¸Ð³Ð½Ð¾ÑиÑÑеÑÑÑ, и никакого визÑалÑного ÑÑÑекÑа не пÑиводиÑ; ÑÑÐ¾Ð±Ñ Ð´Ð¾ÑÑиÑÑ Ñакого ÑÑÑекÑа, иÑполÑзÑйÑе CSS white-space
.
<p>ÐÑполÑзоваÑÑ CSS Ð´Ð»Ñ Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ ÑвеÑа ÑÑиÑÑа легко.</p>
<pre>
body {
color: red;
}
</pre>
РезÑлÑÑÐ°Ñ ÐоÑÑÑпноÑÑÑ
Ðажно пÑедоÑÑавиÑÑ Ð°Ð»ÑÑеÑнаÑивное опиÑание Ð´Ð»Ñ Ð»ÑбÑÑ Ð¸Ð·Ð¾Ð±Ñажений или диагÑамм, ÑозданнÑÑ Ñ Ð¸ÑполÑзованием пÑедваÑиÑелÑно оÑÑоÑмаÑиÑованного ÑекÑÑа. ÐлÑÑеÑнаÑивное опиÑание должно ÑÑÑко и лакониÑно опиÑÑваÑÑ ÑодеÑжание изобÑÐ°Ð¶ÐµÐ½Ð¸Ñ Ð¸Ð»Ð¸ диагÑаммÑ.
ÐÑди, иÑпÑÑÑваÑÑие пÑÐ¾Ð±Ð»ÐµÐ¼Ñ Ñ Ð¿Ð»Ð¾Ñ Ð¸Ð¼ зÑением и пÑоÑмаÑÑиваÑÑие ÑÑÑаниÑÑ Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ Ð²ÑпомогаÑелÑнÑÑ ÑÐµÑ Ð½Ð¾Ð»Ð¾Ð³Ð¸Ð¹, ÑÐ°ÐºÐ¸Ñ ÐºÐ°Ðº пÑогÑамма ÑÑÐµÐ½Ð¸Ñ Ñ ÑкÑана, могÑÑ Ð½Ðµ понимаÑÑ, ÑÑо пÑедÑÑавлÑÑÑ Ñобой пÑедваÑиÑелÑно оÑÑоÑмаÑиÑованнÑе ÑекÑÑовÑе ÑимволÑ, когда они ÑиÑаÑÑÑÑ Ð¿Ð¾ÑледоваÑелÑно.
ÐомбинаÑÐ¸Ñ ÑлеменÑов <figure>
и <figcaption>
, Ð´Ð¾Ð¿Ð¾Ð»Ð½ÐµÐ½Ð½Ð°Ñ id
и ARIA role
и aria-labelledby
, позволÑÐµÑ Ð¾Ð±ÑÑвиÑÑ Ð¿ÑедваÑиÑелÑно оÑÑоÑмаÑиÑованнÑй ÑекÑÑ ÐºÐ°Ðº изобÑажение, а figcaption
ÑлÑÐ¶Ð¸Ñ Ð°Ð»ÑÑеÑнаÑивнÑм опиÑанием изобÑажениÑ.
<figure role="img" aria-labelledby="cow-caption">
<pre>
____________________________
< Я ÑкÑпеÑÑ Ð² Ñвоей облаÑÑи. >
----------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
<figcaption id="cow-caption">
ÐоÑова говоÑиÑ: «Я ÑкÑпеÑÑ Ð² Ñвоей облаÑÑи». ÐоÑова пÑоиллÑÑÑÑиÑована Ñ
иÑполÑзованием пÑедваÑиÑелÑно оÑÑоÑмаÑиÑованнÑÑ
ÑекÑÑовÑÑ
Ñимволов.
</figcaption>
</figure>
white-space
, word-break
<code>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4