6rube.github.io/Typography.html at main · 6rube/6rube.github.io · GitHub

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
---
layout: default
icon: /assets/ico/typo.svg
---
<div class="card card-primary" style="width: 99%; margin: 0px">
    <h2>Bionic Reading</h2>
    <div class="bionic">This is a an example of my implementation of the bionic reading. Every word in the text will be split into 2 parts and depending of the length of the word thefirst few letters will be spelled Bold. The Idea is, that you eyes can differentiate between word better this way.</div>
    <p>If you want to learn more here is a good repository about it <a class="clickable" href="https://github.com/ansh/bionic-reading">https://github.com/ansh/bionic-reading</a></p>
    <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function makeBionic() {
        var a = document.getElementsByClassName("bionic")
        for (let section of a) {
            var b = "";
            var wordContainer = section.innerHTML.split(" ")
            for (let wordIndex in wordContainer) {
                var anker = ""
                var rest = ""
                var WordParts = wordContainer[wordIndex].split('')
                if (WordParts == []) {
                    break
                }
                if (WordParts.length <= 1) {
                    anker = '<span style="font-weight: bolder !important">'
                    + wordContainer[wordIndex] + "</span>"
                }
                if (WordParts.length == 2) {
                    anker = '<span style="font-weight: bolder !important">'
                    + wordContainer[wordIndex].substring(0, 1) + "</span>"
                    rest = '<span style="font-weight: 100 !important">'
                    + wordContainer[wordIndex].substring(1, wordContainer[wordIndex].length) + "</span>"
                }
                if (WordParts.length == 3) {
                    anker = '<span style="font-weight: bolder !important">'
                    + wordContainer[wordIndex].substring(0, 2) + "</span>"
                    rest = '<span style="font-weight: 100 !important">'
                    + wordContainer[wordIndex].substring(2, wordContainer[wordIndex].length) + "</span>"
                }
                if (WordParts.length > 3) {
                    anker = '<span style="font-weight: bolder !important">'
                    + wordContainer[wordIndex].substring(0, 3) + "</span>"
                    rest = '<span style="font-weight: 100 !important">'
                    + wordContainer[wordIndex].substring(3, wordContainer[wordIndex].length) + "</span>"
                }
                b += " " + anker + rest + " "
            }
            section.innerHTML = b
        }
    }
    </code></pre></div></div>
</div>

<div class="card card-primary" style="width: 99%;">
    <h2>No Script</h2>
    <p>I use noscript on the side, so that everyone can display it without having to fear trackers or other stuff like that.
        I really hate, that every page nowadays needs 50mb of js to work properly.
        You can update your alignments for non js users by adding a style tag if the user disabled it like i did in the following.</p>
        <pre class="highlight">
    <code>
        &lt;noscript&gt;
        &lt;style&gt;
        .incanvas {
            width: 100%!important;
            position: absolute !important;
            height: auto !important;
            display: contents;
        }
        .incanvasObject{
            margin: 0px !important;
        }
        .offcanvas-toogle{
            display: none;
        }
        .offcanvas-close{
            display: none;
        }
        &lt;/style&gt;
        &lt;/noscript&gt;
    </code></pre>

    <p>I changed the width of the incanvas to 100% and the position to absolute to display all the content underneath each other.</p>

</div>

<script src="{{ "/assets/js/bionic-formatter.js" | relative_url }}"></script>