tazpanel annotate README.icons @ rev 583

Add powersaving.cgi translations (again)
author Pascal Bellard <pascal.bellard@slitaz.org>
date Sun Apr 10 12:11:05 2016 +0200 (2016-04-10)
parents
children
rev   line source
al@559 1 TazPanel icons
al@559 2 ==============
al@559 3
al@559 4 The default TazPanel theme includes monochrome icons. Currently, there is no
al@559 5 other themes (note, 'sandfive' theme designed for TazPanel in SliTaz-4.0).
al@559 6
al@559 7
al@559 8 Add an icon to the element
al@559 9 --------------------------
al@559 10
al@559 11 To add an ordinary png icon to the button, link, span or any other item, we can
al@559 12 use the following technique:
al@559 13
al@559 14 1. In the HTML source code we add custom 'data-icon' attribute to the element:
al@559 15
al@559 16 <button data-icon="slitaz">Continue...</button>
al@559 17
al@559 18 2. In the CSS we assign an icon for the item:
al@559 19
al@559 20 [data-icon="slitaz"]::before {
al@559 21 content: url('images/slitaz.png');
al@559 22 }
al@559 23
al@559 24 You will see the 'images/slitaz.png' icon in the button to the left of its
al@559 25 label.
al@559 26
al@559 27 We can use 'data-img' attribute in addition to the 'data-icon' when we need
al@559 28 **only** image without label:
al@559 29
al@559 30 <a href="?back" data-img="back"></a>
al@559 31
al@559 32 [data-img="back"]:: before {
al@559 33 content: url('images/back.png');
al@559 34 }
al@559 35
al@559 36
al@559 37 Iconic font
al@559 38 -----------
al@559 39
al@559 40 It was designed font that contains all the icons needed for TazPanel and all its
al@559 41 scripts. If necessary, the font can be expanded with new icons. All available
al@559 42 icons are in [Private Use Area]
al@559 43 (<https://en.wikipedia.org/wiki/Private_Use_Areas>), starting from U+F100.
al@559 44
al@559 45 To view the icons you can use `gucharmap`:
al@559 46
al@559 47 1. Select font 'TazPanel'.
al@559 48 2. Click menu View - By Unicode Block.
al@559 49 3. Click menu View - Show only glyphs from this font.
al@559 50 4. In the 'Unicode Block' select 'Private Use Area'.
al@559 51 5. Scroll right pane up to U+F100.
al@559 52
al@559 53 (Starting from U+F200 you'll see additional font elements used to combine with
al@559 54 some font icons.)
al@559 55
al@559 56 Now we can change our CSS rules to display icons from our font:
al@559 57
al@559 58 @font-face {
al@559 59 font-family: TazPanelWeb;
al@559 60 src: url('/styles/default/tazpanel.ttf');
al@559 61 }
al@559 62 [data-icon]:before, [data-img] {
al@559 63 vertical-align: baseline;
al@559 64 padding: 0;
al@559 65 margin: 0;
al@559 66 font-size: 1.2em;
al@559 67 font-family: TazPanelWeb;
al@559 68 }
al@559 69 [data-img="back"]:: before {
al@559 70 content: '\f102';
al@559 71 }
al@559 72
al@559 73 In the first rule we defined web-font we name 'TazPanelWeb' and use it in the
al@559 74 second rule. In the third rule we print 'back' icon using its Unicode number.
al@559 75
al@559 76 **First pitfall:** not all web browsers can display web fonts :-( Solution: make
al@559 77 our web-font system-wide available via putting it to the `/usr/share/fonts/` and
al@559 78 forge our second rule a bit:
al@559 79
al@559 80 [data-icon]:before, [data-img] {
al@559 81 . . .
al@559 82 font-family: TazPanel, TazPanelWeb;
al@559 83 }
al@559 84
al@559 85
al@559 86 Ligatures
al@559 87 ---------
al@559 88
al@559 89 Fortunately, we can use [ligatures]
al@559 90 (https://en.wikipedia.org/wiki/Typographic_ligature#Stylistic_ligatures) in our
al@559 91 font and considerably simplify the CSS rules. One rule for all data-icons:
al@559 92
al@559 93 [data-icon]::before {
al@559 94 content: attr(data-icon);
al@559 95 }
al@559 96
al@559 97 For example, for `data-icon="back"` we just type word "back" using our web-font,
al@559 98 and font rendering application automatically changed word "back" into icon
al@559 99 "back" (U+F102) and we see icon.
al@559 100
al@559 101 **Second pitfall:** Opera web browser used original Presto engine not supported
al@559 102 font ligatures. Solutions: at first package "tazpanel-ttf-css" was created, that
al@559 103 added CSS rules to use with the Opera web browser. Then we have been made the
al@559 104 global replacement throughout TazPanel code and code of its applets:
al@559 105
al@559 106 1. For example, where we need 'back' icon, we mark it in the TazPanel sources:
al@559 107 `@back@`.
al@559 108 2. When we `make` tazpanel package, special script `stripall.sh` changes all
al@559 109 the `@icon@` entries to the Unicode symbols representing icon itself.
al@559 110
al@559 111 Sources are available in the [repository](http://hg.slitaz.org/tazpanel), and
al@559 112 compiled scripts you can see in your SliTaz in `/var/www/tazpanel/`.
al@559 113
al@559 114 We have some colors in the icons: for example, `cancel`, `remove`, and `delete`
al@559 115 icons are red, while `ok` is green. Note that because CSS rules change at
al@559 116 "compile" time, the icon color will be appointed by its Unicode value; you need
al@559 117 to use `stripall.sh` on your TazPanel applets too to change "ligatures" values
al@559 118 into icon symbol itself, or you'll lose colors.
al@559 119
al@559 120
al@559 121 Font development
al@559 122 ----------------
al@559 123
al@559 124 To develop icon font you need FontForge and Inkscape (both are available in our
al@559 125 repository). You can draw your icons or grab few free icons from the place like
al@559 126 [Fontello](http://fontello.com/).
al@559 127
al@559 128 My workflow:
al@559 129
al@559 130 1. Open icon font (probably, saved from Fontello) in FontForge, and export
al@559 131 icon you need into SVG file.
al@559 132 2. Open SVG in Inkscape (it is more suitable for editing vectors).
al@559 133 3. Change icon:
al@559 134 * Make sure the canvas is 1024x1024, scale your icon if need;
al@559 135 * Simplify curves, remove excess points;
al@559 136 * Snap straight elements to the 16x16 grid (for best icon look while icon
al@559 137 is displayed in 16x16px size in the most cases).
al@559 138 4. Save SVG and import it into web font using FontForge (note, [TrueType uses
al@559 139 quadratic Bézier splines](https://fontforge.github.io/bezier.html), while
al@559 140 Inkscape uses cubic Bézier splines, so your curves are changed after you
al@559 141 export SVG into TTF).
al@559 142 5. Save web font as TTF.
al@559 143 6. Don't forget to add your new icon into `test.cgi` to see how it looks in
al@559 144 the TazPanel interface.
al@559 145
al@559 146 TazPanel font sources are now available among other TazPanel stuff.
al@559 147
al@559 148
al@559 149 Regular icons theme development
al@559 150 -------------------------------
al@559 151
al@559 152 You can create your own TazPanel theme with the png icons.
al@559 153 Let name it "colorful".
al@559 154
al@559 155 1. Make new folder `/var/www/tazpanel/styles/colorful`.
al@559 156 2. Copy all stuff from default TazPanel theme:
al@559 157
al@559 158 cp /var/www/tazpanel/styles/default/* /var/www/tazpanel/styles/colorful
al@559 159
al@559 160 3. Put your icons into sub-folder (for example, `icons`).
al@559 161 4. Edit CSS styles relating to the icons in the `base.css` and `tweaks.css`:
al@559 162 change all the CSS rules with "data-icon" or "data-img" to your rules as it
al@559 163 was shown before:
al@559 164
al@559 165 [data-icon="back"]::before, [data-img="back"]::before {
al@559 166 content: url('icons/back.png');
al@559 167 }
al@559 168
al@559 169 And so on.
al@559 170 5. Change icon theme to 'colorful' inside the TazPanel and open test.cgi
al@559 171 (available in the "tazpanel-extra" package): <http://tazpanel:82/test.cgi>
al@559 172 6. Share your theme with other SliTaz users :-)