a flexbox for sitelen pona, style changes

This commit is contained in:
/dev/urandom 2020-04-10 21:30:29 +03:00
parent 1cc3748fe4
commit 5cef64ae4d
3 changed files with 184 additions and 15 deletions

View file

@ -25,8 +25,14 @@ Here's a table of all possible syllables.
|ta |te | |to |tu |tan|ten| |ton|tun| |ta |te | |to |tu |tan|ten| |ton|tun|
|wa |we |wi | | |wan|wen|win| | | |wa |we |wi | | |wan|wen|win| | |
Another rule is that you can't follow a vowel sound by a vowel sound, and you Another rule is that you can't follow a vowel sound by a vowel soundand you
can't follow a nasal "n" sound with an "m" or another "n". can't follow an "n" sound with an "m" or another "n".
> %info%
> The rule about not following "n" with "m" or "n" is not mentioned in
> the official book or the guidelines on the "o kama sona e toki pona!" course,
> but all proper names for countries introduced in it happen to follow it (for
> example, Myanmar is "ma Mijama", not "ma Mijanma").
Consonant sounds that don't exist in toki pona are replaced with similar sounds. Consonant sounds that don't exist in toki pona are replaced with similar sounds.
For example, Rome (Roma) turns into "ma tomo Loma" and Jakarta turns into "ma For example, Rome (Roma) turns into "ma tomo Loma" and Jakarta turns into "ma
@ -76,4 +82,4 @@ toki pona!" course features [this
list of rules](http://tokipona.net/tp/janpije/tpize.php), and the official book list of rules](http://tokipona.net/tp/janpije/tpize.php), and the official book
has its own. has its own.
[Back to page 7](7.html) [Back to page 7](7.html) [Top page](index.html)

View file

@ -13,6 +13,26 @@
font-family:"sitelen pona"; font-family:"sitelen pona";
font-variant-ligatures: common-ligatures; font-variant-ligatures: common-ligatures;
} }
.spflex {
display: none;
flex-direction: row;
flex-wrap: wrap;
border: 2px solid #9b9b9b;
border-radius: 4pt;
}
.spitem {
flex-grow: 1;
width: 4em;
padding: 0.25em;
margin: 0.5em;
border: 1px solid #9b9b9b;
border-radius: 4pt;
text-align: center;
overflow: hidden;
}
</style> </style>
While the most common writing system for toki pona by far is the Latin alphabet, While the most common writing system for toki pona by far is the Latin alphabet,
@ -48,6 +68,145 @@ book.
> describes it almost exactly the same as the official book. > describes it almost exactly the same as the official book.
> >
<noscript>
<div class="error">
Your web browser has JavaScript disabled. Without it, this page cannot check
whether or not the "linja pimeja" font has successfully loaded. Therefore, the
sitelen pona table will remain hidden.
</div>
</noscript>
<script>
document.fonts.load("12pt 'sitelen pona'").then(function () {
var box = document.getElementsByClassName('spflex');
for (var i=0; i < box.length; i++)
box[i].style.display = "flex";
});
</script>
<div class="spflex">
<div class="spitem"><div class="sp">a</div> a/kin</div>
<div class="spitem"><div class="sp">akesi</div> akesi</div>
<div class="spitem"><div class="sp">ala</div> ala</div>
<div class="spitem"><div class="sp">alasa</div> alasa</div>
<div class="spitem"><div class="sp">ale</div> ale/ali</div>
<div class="spitem"><div class="sp">anpa</div> anpa</div>
<div class="spitem"><div class="sp">ante</div> ante</div>
<div class="spitem"><div class="sp">anu</div> anu</div>
<div class="spitem"><div class="sp">awen</div> awen</div>
<div class="spitem"><div class="sp">e</div> e</div>
<div class="spitem"><div class="sp">en</div> en</div>
<div class="spitem"><div class="sp">esun</div> esun</div>
<div class="spitem"><div class="sp">ijo</div> ijo</div>
<div class="spitem"><div class="sp">ike</div> ike</div>
<div class="spitem"><div class="sp">ilo</div> ilo</div>
<div class="spitem"><div class="sp">insa</div> insa</div>
<div class="spitem"><div class="sp">jaki</div> jaki</div>
<div class="spitem"><div class="sp">jan</div> jan</div>
<div class="spitem"><div class="sp">jelo</div> jelo</div>
<div class="spitem"><div class="sp">jo</div> jo</div>
<div class="spitem"><div class="sp">kala</div> kala</div>
<div class="spitem"><div class="sp">kalama</div> kalama</div>
<div class="spitem"><div class="sp">kama</div> kama</div>
<div class="spitem"><div class="sp">kasi</div> kasi</div>
<div class="spitem"><div class="sp">ken</div> ken</div>
<div class="spitem"><div class="sp">kepeken</div> kepeken</div>
<div class="spitem"><div class="sp">kili</div> kili</div>
<div class="spitem"><div class="sp">kiwen</div> kiwen</div>
<div class="spitem"><div class="sp">ko</div> ko</div>
<div class="spitem"><div class="sp">kon</div> kon</div>
<div class="spitem"><div class="sp">kule</div> kule</div>
<div class="spitem"><div class="sp">kulupu</div> kulupu</div>
<div class="spitem"><div class="sp">kute</div> kute</div>
<div class="spitem"><div class="sp">la</div> la</div>
<div class="spitem"><div class="sp">lape</div> lape</div>
<div class="spitem"><div class="sp">laso</div> laso</div>
<div class="spitem"><div class="sp">lawa</div> lawa</div>
<div class="spitem"><div class="sp">len</div> len</div>
<div class="spitem"><div class="sp">lete</div> lete</div>
<div class="spitem"><div class="sp">li</div> li</div>
<div class="spitem"><div class="sp">lili</div> lili</div>
<div class="spitem"><div class="sp">linja</div> linja</div>
<div class="spitem"><div class="sp">lipu</div> lipu</div>
<div class="spitem"><div class="sp">loje</div> loje</div>
<div class="spitem"><div class="sp">lon</div> lon</div>
<div class="spitem"><div class="sp">luka</div> luka</div>
<div class="spitem"><div class="sp">lukin</div> lukin</div>
<div class="spitem"><div class="sp">lupa</div> lupa</div>
<div class="spitem"><div class="sp">ma</div> ma</div>
<div class="spitem"><div class="sp">mama</div> mama</div>
<div class="spitem"><div class="sp">mani</div> mani</div>
<div class="spitem"><div class="sp">meli</div> meli</div>
<div class="spitem"><div class="sp">mi</div> mi</div>
<div class="spitem"><div class="sp">mije</div> mije</div>
<div class="spitem"><div class="sp">moku</div> moku</div>
<div class="spitem"><div class="sp">moli</div> moli</div>
<div class="spitem"><div class="sp">monsi</div> monsi</div>
<div class="spitem"><div class="sp">mu</div> mu</div>
<div class="spitem"><div class="sp">mun</div> mun</div>
<div class="spitem"><div class="sp">musi</div> musi</div>
<div class="spitem"><div class="sp">mute</div> mute</div>
<div class="spitem"><div class="sp">nanpa</div> nanpa</div>
<div class="spitem"><div class="sp">nasa</div> nasa</div>
<div class="spitem"><div class="sp">nasin</div> nasin</div>
<div class="spitem"><div class="sp">nena</div> nena</div>
<div class="spitem"><div class="sp">ni</div> ni</div>
<div class="spitem"><div class="sp">nimi</div> nimi</div>
<div class="spitem"><div class="sp">noka</div> noka</div>
<div class="spitem"><div class="sp">o</div> o</div>
<div class="spitem"><div class="sp">olin</div> olin</div>
<div class="spitem"><div class="sp">ona</div> ona</div>
<div class="spitem"><div class="sp">open</div> open</div>
<div class="spitem"><div class="sp">pakala</div> pakala</div>
<div class="spitem"><div class="sp">pali</div> pali</div>
<div class="spitem"><div class="sp">palisa</div> palisa</div>
<div class="spitem"><div class="sp">pan</div> pan</div>
<div class="spitem"><div class="sp">pana</div> pana</div>
<div class="spitem"><div class="sp">pi</div> pi</div>
<div class="spitem"><div class="sp">pilin</div> pilin</div>
<div class="spitem"><div class="sp">pimeja</div> pimeja</div>
<div class="spitem"><div class="sp">pini</div> pini</div>
<div class="spitem"><div class="sp">pipi</div> pipi</div>
<div class="spitem"><div class="sp">poka</div> poka</div>
<div class="spitem"><div class="sp">poki</div> poki</div>
<div class="spitem"><div class="sp">pona</div> pona</div>
<div class="spitem"><div class="sp">pu</div> pu</div>
<div class="spitem"><div class="sp">sama</div> sama</div>
<div class="spitem"><div class="sp">seli</div> seli</div>
<div class="spitem"><div class="sp">selo</div> selo</div>
<div class="spitem"><div class="sp">seme</div> seme</div>
<div class="spitem"><div class="sp">sewi</div> sewi</div>
<div class="spitem"><div class="sp">sijelo</div> sijelo</div>
<div class="spitem"><div class="sp">sike</div> sike</div>
<div class="spitem"><div class="sp">sin</div> sin</div>
<div class="spitem"><div class="sp">sina</div> sina</div>
<div class="spitem"><div class="sp">sinpin</div> sinpin</div>
<div class="spitem"><div class="sp">sitelen</div> sitelen</div>
<div class="spitem"><div class="sp">sona</div> sona</div>
<div class="spitem"><div class="sp">soweli</div> soweli</div>
<div class="spitem"><div class="sp">suli</div> suli</div>
<div class="spitem"><div class="sp">suno</div> suno</div>
<div class="spitem"><div class="sp">supa</div> supa</div>
<div class="spitem"><div class="sp">suwi</div> suwi</div>
<div class="spitem"><div class="sp">tan</div> tan</div>
<div class="spitem"><div class="sp">taso</div> taso</div>
<div class="spitem"><div class="sp">tawa</div> tawa</div>
<div class="spitem"><div class="sp">telo</div> telo</div>
<div class="spitem"><div class="sp">tenpo</div> tenpo</div>
<div class="spitem"><div class="sp">toki</div> toki</div>
<div class="spitem"><div class="sp">tomo</div> tomo</div>
<div class="spitem"><div class="sp">tu</div> tu</div>
<div class="spitem"><div class="sp">unpa</div> unpa</div>
<div class="spitem"><div class="sp">uta</div> uta</div>
<div class="spitem"><div class="sp">utala</div> utala</div>
<div class="spitem"><div class="sp">walo</div> walo</div>
<div class="spitem"><div class="sp">wan</div> wan</div>
<div class="spitem"><div class="sp">waso</div> waso</div>
<div class="spitem"><div class="sp">wawa</div> wawa</div>
<div class="spitem"><div class="sp">weka</div> weka</div>
<div class="spitem"><div class="sp">wile</div> wile</div>
</div>
Much like the Latin alphabet, it is written left-to-right and top-to-bottom. Much like the Latin alphabet, it is written left-to-right and top-to-bottom.
Each character represents one word (or sometimes even a phrase), or one letter Each character represents one word (or sometimes even a phrase), or one letter
in a proper name. in a proper name.
@ -68,18 +227,20 @@ represent a noun phrase.
> composite character for "toki pona", with the "pona" symbol written inside the > composite character for "toki pona", with the "pona" symbol written inside the
> "toki" symbol. > "toki" symbol.
Unofficial words are written inside a "cartouche" symbol, with characters for Unofficial words are written inside a "cartouche" symbol (a rounded shape that
words that start with their first letters. For the example linked above (and surrounds all the characters), with characters for words that start with their
used in the official book), "ma Kanata" is written as "ma [kasi alasa nasin awen first letters. For the example linked above (and used in the official book), "ma
telo a]". Kanata" is written as "ma [kasi alasa nasin awen telo a]".
Since the question mark is used as the character for "seme", question sentences Since the question mark is used as the character for "seme", question sentences
may be ended with a period (or a smaller question mark) instead, depending on may be ended with a period (or a smaller question mark) instead, depending on
the text. the text.
Here's some basic text written in sitelen pona. (If your browser is unable to Here's some basic text written in sitelen pona.
load the ["linja pimeja" font](https://github.com/increpare/linja_pimeja), it
should just show up in Latin alphabet instead.) > %warning%
> (If your browser is unable to load the ["linja pimeja" font](https://github.com/increpare/linja_pimeja),
> the text below would just show up in large Latin characters.
> %sp% > %sp%
> wan ni pi lipu ni li sitelen kepeken sitelen pona. sina ken ala ken sona e ni. > wan ni pi lipu ni li sitelen kepeken sitelen pona. sina ken ala ken sona e ni.

View file

@ -6,9 +6,7 @@ html {
body { body {
background: #fafafa; background: #fafafa;
color:#4b4b4b; color:#4b4b4b;
border-style: solid; box-shadow: 0 0 0 1px #9d9d9d;
border-color: #9d9d9d;
border-width: 1px;
max-width: 720pt; max-width: 720pt;
margin: auto; margin: auto;
min-height: 100%; min-height: 100%;
@ -24,8 +22,7 @@ body a:visited {
blockquote { blockquote {
margin: 6pt; margin: 6pt;
padding-inline-start: 1em; padding-inline: 1em;
padding-inline-end: 1em;
border-inline-start: 4px solid #9d9d9d; border-inline-start: 4px solid #9d9d9d;
} }
@ -48,6 +45,9 @@ th, td {
color: #fafafa; color: #fafafa;
font-family: sans-serif; font-family: sans-serif;
min-height: 1px; min-height: 1px;
padding-inline: 2em;
padding-block: 1em;
} }
.header a, .header a:visited { .header a, .header a:visited {
@ -70,6 +70,8 @@ th, td {
.content { .content {
margin: 0 6pt; margin: 0 6pt;
color: #4b4b4b; color: #4b4b4b;
font-family: serif;
padding-inline: 1em;
} }
.info, .warning, .error { .info, .warning, .error {