SliTaz Repositories

     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/README.icons	Wed Jan 05 15:14:01 2022 +0000
     1.3 @@ -0,0 +1,172 @@
     1.4 +TazPanel icons
     1.5 +==============
     1.6 +
     1.7 +The default TazPanel theme includes monochrome icons. Currently, there is no
     1.8 +other themes (note, 'sandfive' theme designed for TazPanel in SliTaz-4.0).
     1.9 +
    1.10 +
    1.11 +Add an icon to the element
    1.12 +--------------------------
    1.13 +
    1.14 +To add an ordinary png icon to the button, link, span or any other item, we can
    1.15 +use the following technique:
    1.16 +
    1.17 +  1. In the HTML source code we add custom 'data-icon' attribute to the element:
    1.18 +
    1.19 +        <button data-icon="slitaz">Continue...</button>
    1.20 +
    1.21 +  2. In the CSS we assign an icon for the item:
    1.22 +
    1.23 +        [data-icon="slitaz"]::before {
    1.24 +            content: url('images/slitaz.png');
    1.25 +        }
    1.26 +
    1.27 +You will see the 'images/slitaz.png' icon in the button to the left of its
    1.28 +label.
    1.29 +
    1.30 +We can use 'data-img' attribute in addition to the 'data-icon' when we need
    1.31 +**only** image without label:
    1.32 +
    1.33 +    <a href="?back" data-img="back"></a>
    1.34 +
    1.35 +    [data-img="back"]:: before {
    1.36 +        content: url('images/back.png');
    1.37 +    }
    1.38 +
    1.39 +
    1.40 +Iconic font
    1.41 +-----------
    1.42 +
    1.43 +It was designed font that contains all the icons needed for TazPanel and all its
    1.44 +scripts. If necessary, the font can be expanded with new icons. All available
    1.45 +icons are in [Private Use Area]
    1.46 +(<https://en.wikipedia.org/wiki/Private_Use_Areas>), starting from U+F100.
    1.47 +
    1.48 +To view the icons you can use `gucharmap`:
    1.49 +
    1.50 +  1. Select font 'TazPanel'.
    1.51 +  2. Click menu View - By Unicode Block.
    1.52 +  3. Click menu View - Show only glyphs from this font.
    1.53 +  4. In the 'Unicode Block' select 'Private Use Area'.
    1.54 +  5. Scroll right pane up to U+F100.
    1.55 +
    1.56 +(Starting from U+F200 you'll see additional font elements used to combine with
    1.57 +some font icons.)
    1.58 +
    1.59 +Now we can change our CSS rules to display icons from our font:
    1.60 +
    1.61 +    @font-face {
    1.62 +        font-family: TazPanelWeb;
    1.63 +        src: url('/styles/default/tazpanel.ttf');
    1.64 +    }
    1.65 +    [data-icon]:before, [data-img] {
    1.66 +        vertical-align: baseline;
    1.67 +        padding: 0;
    1.68 +        margin: 0;
    1.69 +        font-size: 1.2em;
    1.70 +        font-family: TazPanelWeb;
    1.71 +    }
    1.72 +    [data-img="back"]:: before {
    1.73 +        content: '\f102';
    1.74 +    }
    1.75 +
    1.76 +In the first rule we defined web-font we name 'TazPanelWeb' and use it in the
    1.77 +second rule. In the third rule we print 'back' icon using its Unicode number.
    1.78 +
    1.79 +**First pitfall:** not all web browsers can display web fonts :-( Solution: make
    1.80 +our web-font system-wide available via putting it to the `/usr/share/fonts/` and
    1.81 +forge our second rule a bit:
    1.82 +
    1.83 +    [data-icon]:before, [data-img] {
    1.84 +        . . .
    1.85 +        font-family: TazPanel, TazPanelWeb;
    1.86 +    }
    1.87 +
    1.88 +
    1.89 +Ligatures
    1.90 +---------
    1.91 +
    1.92 +Fortunately, we can use [ligatures]
    1.93 +(https://en.wikipedia.org/wiki/Typographic_ligature#Stylistic_ligatures) in our
    1.94 +font and considerably simplify the CSS rules. One rule for all data-icons:
    1.95 +
    1.96 +    [data-icon]::before {
    1.97 +        content: attr(data-icon);
    1.98 +    }
    1.99 +
   1.100 +For example, for `data-icon="back"` we just type word "back" using our web-font,
   1.101 +and font rendering application automatically changed word "back" into icon
   1.102 +"back" (U+F102) and we see icon.
   1.103 +
   1.104 +**Second pitfall:** Opera web browser used original Presto engine not supported
   1.105 +font ligatures. Solutions: at first package "tazpanel-ttf-css" was created, that
   1.106 +added CSS rules to use with the Opera web browser. Then we have been made the
   1.107 +global replacement throughout TazPanel code and code of its applets:
   1.108 +
   1.109 +  1. For example, where we need 'back' icon, we mark it in the TazPanel sources:
   1.110 +     `@back@`.
   1.111 +  2. When we `make` tazpanel package, special script `stripall.sh` changes all
   1.112 +     the `@icon@` entries to the Unicode symbols representing icon itself.
   1.113 +
   1.114 +Sources are available in the [repository](http://hg.slitaz.org/tazpanel), and
   1.115 +compiled scripts you can see in your SliTaz in `/var/www/tazpanel/`.
   1.116 +
   1.117 +We have some colors in the icons: for example, `cancel`, `remove`, and `delete`
   1.118 +icons are red, while `ok` is green. Note that because CSS rules change at
   1.119 +"compile" time, the icon color will be appointed by its Unicode value; you need
   1.120 +to use `stripall.sh` on your TazPanel applets too to change "ligatures" values
   1.121 +into icon symbol itself, or you'll lose colors.
   1.122 +
   1.123 +
   1.124 +Font development
   1.125 +----------------
   1.126 +
   1.127 +To develop icon font you need FontForge and Inkscape (both are available in our
   1.128 +repository). You can draw your icons or grab few free icons from the place like
   1.129 +[Fontello](http://fontello.com/).
   1.130 +
   1.131 +My workflow:
   1.132 +
   1.133 +  1. Open icon font (probably, saved from Fontello) in FontForge, and export
   1.134 +     icon you need into SVG file.
   1.135 +  2. Open SVG in Inkscape (it is more suitable for editing vectors).
   1.136 +  3. Change icon:
   1.137 +     * Make sure the canvas is 1024x1024, scale your icon if need;
   1.138 +     * Simplify curves, remove excess points;
   1.139 +     * Snap straight elements to the 16x16 grid (for best icon look while icon
   1.140 +       is displayed in 16x16px size in the most cases).
   1.141 +  4. Save SVG and import it into web font using FontForge (note, [TrueType uses
   1.142 +     quadratic Bézier splines](https://fontforge.github.io/bezier.html), while
   1.143 +     Inkscape uses cubic Bézier splines, so your curves are changed after you
   1.144 +     export SVG into TTF).
   1.145 +  5. Save web font as TTF.
   1.146 +  6. Don't forget to add your new icon into `test.cgi` to see how it looks in
   1.147 +     the TazPanel interface.
   1.148 +
   1.149 +TazPanel font sources are now available among other TazPanel stuff.
   1.150 +
   1.151 +
   1.152 +Regular icons theme development
   1.153 +-------------------------------
   1.154 +
   1.155 +You can create your own TazPanel theme with the png icons.
   1.156 +Let name it "colorful".
   1.157 +
   1.158 +  1. Make new folder `/var/www/tazpanel/styles/colorful`.
   1.159 +  2. Copy all stuff from default TazPanel theme:
   1.160 +
   1.161 +         cp /var/www/tazpanel/styles/default/* /var/www/tazpanel/styles/colorful
   1.162 +
   1.163 +  3. Put your icons into sub-folder (for example, `icons`).
   1.164 +  4. Edit CSS styles relating to the icons in the `base.css` and `tweaks.css`:
   1.165 +     change all the CSS rules with "data-icon" or "data-img" to your rules as it
   1.166 +     was shown before:
   1.167 +
   1.168 +         [data-icon="back"]::before, [data-img="back"]::before {
   1.169 +             content: url('icons/back.png');
   1.170 +         }
   1.171 +
   1.172 +     And so on.
   1.173 +  5. Change icon theme to 'colorful' inside the TazPanel and open test.cgi
   1.174 +     (available in the "tazpanel-extra" package): <http://tazpanel:82/test.cgi>
   1.175 +  6. Share your theme with other SliTaz users :-)