PageSourceSearch

https://schulschrift.at/sandkiste/

html schulschrift.at collected 2026-10-05 03:40:58 UTC 14,830 bytes, 318 lines download raw bytes

1<!DOCTYPE html>
2<html lang="de">
3  <head>
4    <meta charset="UTF-8" />
5    <title>Primæ Sandkiste: Schreib mit mir!</title>
6    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7    <meta name="viewport" content="width=device-width, initial-scale=1" />
8    <meta name="description" content="Prima: eine Schrift zum Lesen- und Schreibenlernen">
9    <meta name="keywords" content="Primæ, Primae, Schulschrift, Österreich, schreiben, lernen, Schule, abc, Handschrift, Schriften, Schrift">
10    <meta name="author" content="Wiener Schriften" />
11    <meta name="theme-color" content="rgb(0,115,175)" />
12
13    <!-- CSS -->
14    <link href="/main.css" rel="stylesheet" type="text/css">
15
16    <!-- favicons -->
17    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
18    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
19    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
20    <link rel="manifest" href="/site.webmanifest" />
21
22    
22<script type="text/javascript">
23      function changeSS_U()     
24      // changes stylistic sets in uprights fonts
25      { 
26        let feature_on = "font-feature-settings: 'calt', 'kern', 'onum' 1," ;
27
28            if (document.getElementById("Uss01").checked) { feature_on += "'ss01' 1," };
29            if (document.getElementById("Uss02").checked) { feature_on += "'ss02' 1," };
30            if (document.getElementById("Uss03").checked) { feature_on += "'ss03' 1," };
31            if (document.getElementById("Uss04").checked) { feature_on += "'ss04' 1," };
32            if (document.getElementById("Uss05").checked) { feature_on += "'ss05' 1," };
33            if (document.getElementById("Uss06").checked) { feature_on += "'ss06' 1," };
34            if (document.getElementById("Uss07").checked) { feature_on += "'ss07' 1," };
35
36            feature_on = feature_on.slice(0,-1)+";"
37
38            let txt = document.getElementsByClassName("upright");
39            for (i = 0; i < txt.length; i++) 
40                {
41              //   txt[i].style.fontFeatureSettings = null; // nuke existing features -->
42                let s = txt[i].style.cssText // get existing styles, then add font-feature-settings
43                s += " " + feature_on
44                txt[i].setAttribute("style", s);
45                }
46      }
47
48      function changeSS_C()     
49      { 
50      // changes stylistic sets in cursive fonts
51        let feature_on = "font-feature-settings: 'calt', 'kern', 'onum' 1," ;
52
53            if (document.getElementById("Css01").checked) { feature_on += "'ss01' 1," };
54            if (document.getElementById("Css02").checked) { feature_on += "'ss02' 1," };
55            if (document.getElementById("Css03").checked) { feature_on += "'ss03' 1," };
56            if (document.getElementById("Css04").checked) { feature_on += "'ss04' 1," };
57            if (document.getElementById("Css05").checked) { feature_on += "'ss05' 1," };
58            if (document.getElementById("Css06").checked) { feature_on += "'ss06' 1," };
59            if (document.getElementById("Css07").checked) { feature_on += "'ss07' 1," };
60            if (document.getElementById("Css08").checked) { feature_on += "'ss08' 1," };
61            if (document.getElementById("Css09").checked) { feature_on += "'ss09' 1," };
62            if (document.getElementById("Css10").checked) { feature_on += "'ss10' 1," };
63            if (document.getElementById("Css11").checked) { feature_on += "'ss11' 1," };
64            if (document.getElementById("Css12").checked) { feature_on += "'ss12' 1," };
65            if (document.getElementById("Css13").checked) { feature_on += "'ss13' 1," };
66            if (document.getElementById("Css14").checked) { feature_on += "'ss14' 1," };
67            if (document.getElementById("Css15").checked) { feature_on += "'ss15' 1," };
68            if (document.getElementById("Css16").checked) { feature_on += "'ss16' 1," };
69            if (document.getElementById("Css17").checked) { feature_on += "'ss17' 1," };
70            if (document.getElementById("Css18").checked) { feature_on += "'ss18' 1," };
71            if (document.getElementById("Cswsh").checked) { feature_on += "'swsh' 1," };
72
73            feature_on = feature_on.slice(0,-1)+";"
74
75            let txt = document.getElementsByClassName("italic");
76            for (i = 0; i < txt.length; i++) 
77                {
78
79                let s = txt[i].style.cssText // get existing styles, then add font-feature-settings
80                s += " " + feature_on
81                txt[i].setAttribute("style", s);
82                }
83      }
84
85    // expands hidden font feature panel to a given percentage subject to the viewport 
86    function openNav() 
87    {
88      if (window.matchMedia("(max-width: 767px)").matches) { // If media query matches
89      document.getElementById("fontfeaturepanel").style.width = "75%";
90        } 
91      else {
92      document.getElementById("fontfeaturepanel").style.width = "35%";
93        }
94    }
95    function closeNav()
96    {
97      document.getElementById("fontfeaturepanel").style.width = "0";
98      document.getElementById("fontfeaturepanel").style.padding = "0";
99    }
100</script>
100
101    
101<script src="/nav.js"></script>
101
102
103</head>
104
105<body>
106  <div class="panel" style="padding-bottom: 0;">
107    <div class="navigation" id="myNav">
108      <div class="nav-left">
109        <a href="javascript:void(0);" class="icon" onclick="myNavi()">
110          <img src="/imgs/menue_icon.svg" alt="Menu">
111        </a>
112        <a href="/">Home</a>
113        <a href="/familie/">Familie</a>
114        <a href="/ueber/">Über</a>
115        <a href="/sandkiste/">Sandkiste</a>
116        <a href="/primaepp/">Primæpp</a>
117      </div>
118      <div class="nav-right">
119        <a href="/sandkiste/">de</a>
120        <a href="/sandpit/">en</a>
121      </div>
122    </div>
123
124      <hr style="margin-top: 0em; margin-bottom: 0" />
125      <h1 class="lightitalic">Sandkiste: Schreib mit mir!</h1>
126
127    <div id="fontfeaturepanel" class="sidenav">
128      <a href="javascript:void(0)" id="closebtn" style="cursor:pointer" onclick="closeNav()">→</a>
129
130      <!-- OpenType feature checkboxes Upright -->
131      <ul>
132
133
134        <h4>Unverbunden</h4>
135          <li><input type="checkbox" class="toggle-box" id="Uss01" onclick="changeSS_U()"/>
136          <label for="Uss01">f ohne Unterlänge</label></li>
137          <li><input type="checkbox" class="toggle-box" id="Uss02" onclick="changeSS_U()"/>
138          <label for="Uss02">k in einem Zug</label></li>
139          <li><input type="checkbox" class="toggle-box" id="Uss03" onclick="changeSS_U()"/>
140          <label for="Uss03">q mit Abstrich</label></li>
141          <li><input type="checkbox" class="toggle-box" id="Uss04" onclick="changeSS_U()"/>
142          <label for="Uss04">zweistöckiges a</label></li>
143          <li><input type="checkbox" class="toggle-box" id="Uss05" onclick="changeSS_U()"/>
144          <label for="Uss05">U ohne Abstrich</label></li>
145          <li><input type="checkbox" class="toggle-box" id="Uss06" onclick="changeSS_U()"/>
146          <label for="Uss06">J auf der Grundlinie</label></li>
147          <li><input type="checkbox" class="toggle-box" id="Uss07" onclick="changeSS_U()"/>
148          <label for="Uss07">7 ohne Querstrich</label></li>
149      </ul>
150
151      <ul>
152      <!-- OpenType feature checkboxes Cursive -->
153        <h4>Kursiv</h4>
154          <li><input type="checkbox" class="toggle-box" id="Css01" onclick="changeSS_C()"/>
155          <label for="Css01">k unverbunden</li></label>
156
157          <li><input type="checkbox" class="toggle-box" id="Css02" onclick="changeSS_C()"/>
158          <label for="Css02">r unterbrochen</li></label>
159
160          <li><input type="checkbox" class="toggle-box" id="Css03" onclick="changeSS_C()"/>
161          <label for="Css03">t unterbrochen</li></label>
162
163          <li><input type="checkbox" class="toggle-box" id="Css04" onclick="changeSS_C()"/>
164          <label for="Css04">g, j, y unterbrochen</li></label>
165
166          <li><input type="checkbox" class="toggle-box" id="Css05" onclick="changeSS_C()"/>
167          <label for="Css05">k, r, t unterbrochen</li></label>
168
169          <li><input type="checkbox" class="toggle-box" id="Css06" onclick="changeSS_C()"/>
170          <label for="Css06">ä, ö, ü unterbrochen</li></label>
171
172          <li><input type="checkbox" class="toggle-box" id="Css07" onclick="changeSS_C()"/>
173          <label for="Css07">x unterbrochen</li></label>
174
175          <li><input type="checkbox" class="toggle-box" id="Css08" onclick="changeSS_C()"/>
176          <label for="Css08">x alternativ verbunden</li></label> 
177
178          <li><input type="checkbox" class="toggle-box" id="Css09" onclick="changeSS_C()"/>
179          <label for="Css09">ß mit Unterlänge</li></label>
180
181          <li><input type="checkbox" class="toggle-box" id="Css10" onclick="changeSS_C()"/>
182          <label for="Css10">æ Alternative</li></label>
183
184          <li><input type="checkbox" class="toggle-box" id="Css11" onclick="changeSS_C()"/>
185          <label for="Css11">E unterbrochen</li></label>
186
187          <li><input type="checkbox" class="toggle-box" id="Css12" onclick="changeSS_C()"/>
188          <label for="Css12">G unterbrochen</li></label>
189
190          <li><input type="checkbox" class="toggle-box" id="Css13" onclick="changeSS_C()"/>
191          <label for="Css13">J unterbrochen</li></label>
192
193          <li><input type="checkbox" class="toggle-box" id="Css14" onclick="changeSS_C()"/>
194          <label for="Css14">K unterbrochen</li></label>  
195
196          <li>
196<input type="checkbox" class="toggle-box" id="Css15" onclick="changeSS_C()"/>
197          <label for="Css15">L unterbrochen</li></label> 
198
199          <li><input type="checkbox" class="toggle-box" id="Css16" onclick="changeSS_C()"/>
200          <label for="Css16">R unterbrochen</li></label>  
201
202          <li><input type="checkbox" class="toggle-box" id="Css17" onclick="changeSS_C()"/>
203          <label for="Css17">Q unterbrochen</li></label> 
204
205          <li><input type="checkbox" class="toggle-box" id="Css18" onclick="changeSS_C()"/>
206          <label for="Css18">J auf Grundlinie</li></label>   
207
208          <li><input type="checkbox" class="toggle-box" id="Cswsh" onclick="changeSS_C()"/>
209          <label for="Cswsh">Schwünge</li></label>  
210
211        </ul>
212        <a href="javascript:void(0)" id="closebtn" style="cursor:pointer" onclick="closeNav()">→</a>
213      </div>
214
215    <div class="test" style="padding: 0.5em 1em 4em 1em;">
216
217      <h5>Light | <a style="cursor:pointer" onclick="openNav()">Schreibvarianten</a></h5>
218      <p class="test-text upright light" contenteditable="true">
219        Mitten im Wald ist eine Wiese. Mitten auf der Wiese steht ein Haus.
220        Hinter dem Haus wächst ein Apfelbaum. Dort lebte einmal ein Pony.
221      </p>
222
223      <hr>
224
225      <h5>Light Cursive | <a style="cursor:pointer" onclick="openNav()">Schreibvarianten</a></h5>
226      
227      <p class="italic test-text lightitalic" contenteditable="true">
228        Der Franz ist sieben Jahre alt und geht in die erste Klasse. Er ist das
229        kleinste Kind in der Schule. Weder in der 1a noch in der 1b noch in der
230        1c gibt es ein kleineres Kind als den Franz.
231      </p>
232    
233      <hr>
234
235      <h5>Semilight | <a style="cursor:pointer" onclick="openNav()">Schreibvarianten</a></h5>
236      <p class="test-text upright semilight" contenteditable="true">
237        Ich heiße Lisa. Ich bin ein Mäd&shy;chen. Das hört man übrigens auch am
238        Namen. Ich bin sieben Jahre alt und werde bald acht.
239      </p>
240          
241      <hr>
242
243      <h5>Semilight cursive | <a style="cursor:pointer" onclick="openNav()">Schreibvarianten</a></h5>
244      <p class="test-text italic semilightitalic" contenteditable="true">
245        Läuft gleich zu den Tieren hin: "So, jetzt weiß ich, wer ich bin! Kennt
246        ihr mich? Ich bin ich!"
247      </p>
248
249      <hr>
250
251      <h5>Regular | <a style="cursor:pointer" onclick="openNav()">Schreibvarianten</a></h5>
252      <p class="test-text upright" contenteditable="true">
253        Joschi erzählte dem kleinen Grusel&shy;wusel das Märchen vom
254        Rotkäppchen, und als er damit fertig war, hörte er Mizzi in ihr Zimmer
255        gehen.
256      </p>
257      
258      <hr>
259
260      <h5>Cursive | <a style="cursor:pointer" onclick="openNav()">Schreibvarianten</a></h5>
261      <p class="test-text italic" contenteditable="true">
262        Da hob die kleine Maja ihr Köpfchen, bewegte ihre schönen neuen Flügel
263        und empfand plötzlich, daß das Flugbrett, auf dem sie saß, zu versinken
264        schien.
265      </p>
266
267      <hr>
268
269      <h5>Semibold | <a style="cursor:pointer" onclick="openNav()">Schreibvarianten</a></h5>
270      <p class="test-text upright semibold" contenteditable="true">
271        »Komm schnell!«, rief Kiri. Sie nahm Koko an der Hand, und dann liefen
272        sie, so schnell sie konnten, zu der Höhle der kleinen Bärin.
273      </p>
274          
275      <hr>
276
277      <h5>Semibold Cursive | <a style="cursor:pointer" onclick="openNav()">Schreibvarianten</a></h5>
278      <p class="test-text italic semibolditalic" contenteditable="true">
279        Am Rand der kleinen, kleinen Stadt lag ein alter verwahrloster Garten.
280        In dem Garten stand ein altes Haus, und in dem Haus wohnte Pippi
281        Langstrumpf.
282      </p>
283          
284      <hr>
285
286      <h5>Bold | <a style="cursor:pointer" onclick="openNav()">Schreibvarianten</a></h5>
287      <p class="test-text upright bold" contenteditable="true">
288        Mr und Mrs Dursley im Li&shy;guster&shy;weg Nummer 4 waren stolz darauf,
289        ganz und gar normal zu sein, sehr stolz sogar.
290      </p>
291          
292      <hr>
293
294      <h5>Bold Cursive | <a style="cursor:pointer" onclick="openNav()">Schreibvarianten</a></h5>
295      <p class="test-text italic bolditalic" contenteditable="true">
296        Wo der Fußweg anfängt, beginnt bald Heideland mit dem kurzen Gras und
297        den kräftigen Bergkräutern dem Kommenden entgegenzuduften, denn der
298        Fußweg geht steil und direkt zu den Alpen hinauf.
299      </p>
300    </div>
301  </div>  
302<footer>
303  <div class="panel">
304    <p><a href="/">Home</a> | <a href="/impressum/">Impressum</a></p>
305    <div class="footer-logos-row">
306      <div class="footer-logo-col">
307        <a href="https://www.wienerschriften.at" target="_blank" rel="noopener noreferrer"><img src="/imgs/WS_wordmark_padded_red-black.svg" class="logos" alt="Wiener Schriften"></a>
308        <p>
308Copyright &copy; WS &middot; Schriftmanufaktur e.U. 2022&ndash;26, all rights reserved.</p>
309      </div>
310      <div class="footer-logo-col">
311        <a href="https://wirtschaftsagentur.at/" target="_blank" rel="noopener noreferrer"><img src="/imgs/Wirtschaftsagentur_Wien_Logo_prim_r_DE_Web.jpg" class="logos" alt="Wirtschaftsagentur Wien"></a>
312        <p>Gef&ouml;rdert durch die Wirtschaftsagentur Wien. Ein Fonds der Stadt Wien.</p>
313      </div>
314    </div>
315  </div>
316</footer>
317</body>
318</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.