20 th European Scientific Conference of Doctoral Students PEFnet 2016

Transcription

1 20 th European Scientific Conference of Doctoral Students PEFnet 2016 November 24, 2016, Brno, Czech Republic Abstract David Schubert: The use of icon fonts in the web environment and automation of their inserting into the stylesheets This article describes how to use the icons fonts for creating web pages. These fonts are special typeface with pictograms instead of alphabetical characters. When these fonts are inserted into the stylesheets they must be state by their character codes which are represented in the file. Thanks to this may be icons inserting in this way time consuming and frustrating. This problem and automation of this process is solved in this article. In the papper will be analysed how to insert icons into the stylesheets and the possibilities of generating their own sets. In the next part will be describe how to automate and implement inserting icons into the stylesheets.the resulting solution will automate and facilitate the embedding icons into the stylesheets and can be practivally used in the implementation of websites. Key words Icon, font, CSS, pseudo-element, pseudo-class JEL: L86 Contacts David Schubert, Department of Informatics, Faculty of Business and Economics, Mendel university in Brno, Zemědělská 1, Brno, Czech Republic, Acknowledgements This article is the result of a research project supported by the Internal Grant Agency of the Faculty of Business and Economics, Mendel University in Brno no. PEF_DP_ Optimizing the development of methods for creating web applications on the client side.

2 Introduction Web page may consist of a large number of various HTML elements that can be represented of simple elements (hyperlinks, buttons, headings, etc.), or more or less complex structures consisting of multiple elements (main navigation, forms, etc.). In the graphic designs, these elements can often contain various graphic elements as small icons and images. When converting into the HTML template is needed these icons to extract from graphic design and insert as images of background images into the HTML document. Most instances of these icons we can notice especially by the control elements, such as various types of buttons, links or unordered lists. When using bitmaps problems arises with their data size and with the creating additional http requests, whitch can prolong the the loading time of the page. Reducing number of http requests and the total size can be achieved for example by using so called CSS sprites. Currently, this technique is leaving due the onset of high-capacity displays, on which these images may be blurry. Problems asociated with the use of raster images can be solved by using web fonts. Technically, it is a special kind of web fonts, in wich instead of the usual alpabetical characters are defined variable graphical symbols like pictograms. On the Internet you can find many prepared sets of icons or the files with the icons can be generated using by the online applications. One problem with the use of icon fonts can be complexity of their inserting into the stylesheets where for each character you need to know the sequece of control charactes which is represented in the file. Inserting this way can then creating websites to slow down and then arises a need to automate this process. The goal of this paper is to design and implement a method that will automate the process of inserting its own icon sets into the stylesheets. 1 Currenty used methods Proposed method to automate the insertion of icon fonts used methods and techiniques from the field of web sites using HTML and CSS where plays a key role the generated content made by pseudoelements which are accessed using the selectors of pseudo-classes. In the CSS it is mainly used of positioning, text fonts and boxig properties. For the implementation it is used the JavaScript language and CSS preprocessor in the Node.js runtime enviroment. Input data then contain the actual font files with icons and the additional data in JSON format. In examining this issue I didn't find necessary information in any scietific journals or in any technical literature. Presented methods and procedures are the result of a research of discussion forums, articles, blogs and technical documentation related to this topic. 1

3 To achieve the desired goals was designed methodical proces solution whitch is divided into five closely related poinst. This includes the following successive phases: 1. The analysis of the reseached problematics perform basic analysis of the researched problematice with respect of general principles and possibilities of embedding icons into the stylesheets. 2. Determination of criteria and selection of a suitable font generator determination the requiremets that must be respected during the search for the generator of own icon sets. I t is necessary that the generator be able to create a suitable secondary data to the generated files. These data will be further used to automate the proces when you insert icons into stylesheet. 3. Determination of proces solutions it will be determined a general solution procedure based on the previous points including implementation techniques and tools. 4. Practical implementation of solutions based on the general procedure of solution of the previous paragraph will be conducted the implementation with the determined implementation tools. 5. Evaluation of results at this point will be evaluated reached results and will be made the discussion at that solving problem. 1.1 Hammings point-of-view Currently, we can insert icons into the websites in two ways. The first way is by inserting using images either as standard HTML element or image as the background image using cascading style sheets. If you are inserted pictures one by one as separate files there is the problem of creating HTTP requests for each file. These HTTP requests can with the combination of long response significantly slow down the loading of page. This problem is solved using technique called CSS sprites which is based on the idea that all the pictures are merged into one single image. Savings therefore consists in reducing http requests that especially in connection with a long response significantly slow down the loading. Since this optimization method is used mainly for displaying icons in the background there is a reduction in the use of this technology and passes tend to use vector formats using web fonts because of the high-capacity displays which can make raster images a little blurry. 2

4 1.1.1 Icon fonts and their usabilities Icon fonts are web fonts which are a special kind of web fonts connected using directive. There are instead of normal alphabet characters defined special graphic symbols. Font icons can be used practically in all browsers that support web fonts which are currently all modern browsers. Web fonts are supported in Internet Explorer version 6, Mozilla firefox from version 3.5, Google Chrome since version 4, Opera version 10 and Safari version 3.1. On mobile devices is support similarly good. Web fonts can be used on almost all devices except those that use mobile Opera Mini browser, Internet Explorer Mobile and older (MDN, 2016). The advantage of the deployment of font icons is less data load, the ability to zoom without any loss of quality and simplicity discoloring with using CSS rules. It does not create additional http requests it downloadins usually a smaller file. The disadvantage of using icon fonts may be the limitation to one color that the icon can have. Because the icons in this case are text their appearance affects many properties such as font-size, line-height, vertical-align and more. For generating custom icon sets are used for example web service IcoMoon.io or Fontastic.me. Here is the place for improvement and opportunity to implement automation technique in a CSS preprocessor for icon font embedding into the final CSS code. Becaouse it is more difficult to use font icons with precision per pixel. Another drawback may be creating your own font with the necessary icons versus prepared icon font set. When using prepared font sets are typically downloaded unused icons (CSS declarations, the whole file with icons). Of course, it is possible to create a custom font, which only contains needed icons, but it can be tedious and difficult to automate. A specific application is needed to search for the codes of each icon Method of inserting font icons into the stylesheets When creating websites is common to set their text content using the CSS font-family properties a specific or generic font family. To use specific font families can be define completely specific fonts. However, in this case may occur the problem, if the device has selected typeface installed.this problem can be solved by placing a specific font familie directly to the disk or server. In this case the rule is that the family placed the file in a format which supports all web browsers. These files are then connected with CSS using directive which then gives a way to link the files containing the typeface and formats (W3C, 2013). Individual formats can be seen in the following table. 3

5 Table 1 - formats of webfonts String Font Format Common extension "woff" WOFF (Web Open Font Format).woff "truetype" TrueType.ttf "opentype" OpenType.ttf,.otf "embedded-opentype" Embedded OpenType.eot "svg" SVG Font.svg,.svgz Definition of font families in CSS would look like { font-family: 'MyWebFont'; src: url('webfont.eot'); src: url('webfont.eot?#iefix') format('embedded-opentype'), url('webfont.woff2') format('woff2'), url('webfont.woff') format('woff'), url('webfont.ttf') format('truetype'), url('webfont.svg#svgfontname') format('svg'); } The same principle is also used when inserting icons. Into the style sheets are inserted the paths to the files with the icons. These files have exactly the same formats. But instead of the usual characters include characters icons. These characters are represented based on the Unicode hexadecimal values and they are accessed using a pseudo CSS content property where is stated the sequence of these control characters. Each icon is inserted into the document using the generated content. Generated content Use of pseudo selectors allows you to assign styles such structures that do not necessarily exist in the document or non-existent classes deduce the state of certain elements or even the status the document itself. Pseudo-classes: before and: after are used to generate a new element before or after the content of the element to which they relate (Meyer, 2007). A common way of embedding icons into the stylesheet is using the pseudo-elements and CSS pseudo-classes: before and: after. This method uses eg.set of icons for Bootstrap framework FontAwesome. Pseudo-class: before allows you to insert generated content at the beginning of the element content. By default, this pseudo-element is inline, but can be changed to a block by the display property. This class thus generates a pseudo-element containing the icon character and 4

6 places it in front of the element's content. Pseudo-class:after works in a similar way, but the generated content is placed after the element's content (W3C, 2016). Figure 1 generated content via pseudo-class :before and :after Used CSS properties For embedding icons will be appropriate to use the following CSS properties: Positioning position property values and keywords (top, left, etc.) or specific values specifying the location of the item relative to the parent element. Fonts and text properties font-size, line-height, font-family, vertical-align, color properties. Box properties outer box filler (margin) and the dimensions of the box (widht and height). Pseudocontent properties content property, which is used to select the icon from the font file. Most of these properties can be in many cases generally set according to various requirements. To set a specific icon is important to know the sequence of control characters, thanks to which they can be accessed. Further, it is important to know the dimensions of icon to determine the font size or size of pseudo-element. From these data it can easily derive the precise positioning of the icons Generator of icon sets On the Internet you can find several quality icon fonts generators such as IcoMoon, Fontella or Fontastic. When examining individual generators that seem most appropriate to use a generator IcoMoon, which has a high quality icon sets. Individual icons from different sets can be selected and then can be used to create a custom selection of icons. The application also has the option of editing the icons, where you can set the grid or orientation icon. 5

7 When creating a custom font sets the choices and modifications are automatically saved in the browser's memory so that you can always load (unless it is erased browser cache). In addition, each generated package contains the file named selection.json that contains data about generated set, which can always be imported into the application. This file contains important information for further processing, such as particular grid of icons, names and codes (IcoMoon, 2016) Implementation tools When developing the client part of the website can be found with many repetitive, time-consuming, tedious and unpleasant tasks (for example.translations of source files CSS preprocessors or Compacting CSS and JavaScript files). Currently, there are many tools such as. Grunt and Gulp, which significantly simplify and speed up the work by automating these tasks. These tools are based on the Node.js, which is a powerful, event-driven environment for JavaScript based on the JavaScript interpreter V8 from Google which is used in Google Chrome and is enriched with features that allow scripts to access files or network elements. Programs designed for Node.js are written in JavaScript and frequently use a model of events and asynchronous input-output operations to reduce CPU utilization and maximize his performance (Node.js, 2016). Grunt.js Grunt and also Grunt.js is a tool written in Node.js and used to execute one or more tasks on the part of front-end, as already mentioned compilation CSS preprocessor minification or joining multiple files into a single final. At the same time the ability to track changes in the edited files and each time the change ready to start the job. Preprocesor stylus CSS preprocessor provides excellent meta programming options and has a very simple syntax notation. The simple syntax allows quick, easy and elegant writing CSS rules. Writing variables without requiring special character can also save time. During solving this problem find application mixins which are defined and named blocks of code that can be latter called in the source code by their name. Mixins are similar functions and can take parameters. 2 My contribution In the research part was realized an analysis of the possibility of inserting icons into the stylesheet and viewing it in the HTML document. Icon files will be linked into stylesheets by directive and then each used icon will be inserted using the CSS content property which contains the sequence of control characters. These icons will be displayed in an HTML document using the generated content (pseudo-elements). The next research was conducted in own icon sets generators 6

8 area and was selected IcoMoon online tool that generates next to the icon file also quality data for further processing. As an implementation tool was selected Grunt.js which runs in Node.js. As a suitable preprocessor for implementation embedding icons into the stylesheet was chosen preprocessor Stylus. 2.1 Criteria for implementation As a way of embedding icons was selected pasting which using a pseudo-generated content. Before the implementation it was necessary to consider the cases of embedding icons into CSS. Possibilities include three basic application of insertion: Icon inserting as a separate element. Icon inserting as an inline element. Icon inserting with the possibility of positioning within the element. Another was necessary to determine and optimize the amount of common properties for a given use cases that should be stored in variables from which would then the various options to inherit these properties. For different use cases are then in the mixins determined specific characteristics. But it is important to obtain data about themselves icons. Here it is necessary to know the name of the icon, a sequence of control characters and a grid which necessary to determine the size of the pseudoelement. 2.2 Draft resolution procedure Based on the determination method of displaying icons, selection implementation tools and selecting of the appropriate icon sets generator can be continued in the draft solution of process. For the implementation of this problem is necessary to have a good quality data generated by IconMoon app along with the icon files. Process solutions consists the following steps: 1. User of the generator IcoMoon selects a custom icon set and generates it as a packaged file that will contain icon fonts and the attached file named selection.json which contained data for further processing. 2. Using directive joins files with icons (web fonts) created by generator. 3. For the next step is needed from the selection.json file select only necessary data which are the names of the icons, their codes, and their grid. File selection.json is necessary to go through and create a new file that will contain only the data you need. For this, it is 7

9 appropriate to implement Grunt.js task where is possible to work with files. The task creates a new stylus file with the required data. Each item in the file will be represented by variable name of icon. To this variable will be assigned a list with the required values, for example: icon_name = (code, icon_widht, icon_height). 4. It is created in Stylus a helper file named helpers.styl which defines mixin. The mixins then manipulate with the icon variables. These mixins will take one of the parameters. It is the name of the variable that will contain a list of generated code and dimensions. When mixins will be called they generate a block of code with css properties and automatically insert an icon into the stylesheet. After the final compilation will be an icon in the stylesheet automatically included in the required selectors. 2.3 Implementation Within the implementation of the solution was necessary to create a task in Grunt.js tool that handles file selection.json. Furthermore then create a preprocessor Stylus ready blocks of code called. Mix in the automatic incorporation of icons into the stylesheet Implementation of task in Grunt.js The task in Grunt.it takes paratetr which is the path to the file selection.json. This method checks the existence of the file. If the file exists, it passes and processes the contained data. From browsed data creates a new object containing only the necessary data. From these data are created a Stylus file whitch contains a variable named as icon name. To this variabale is assigned lists with the control characters and the dimensions. This file is written to disk and it available for other use Implementation in CSS preprocesor Stylus For implementation was chosen preprocessor Stylus because of its programming nature allows the simplest and easiest writing of source code. Implementation was realized by the Stylus Mixins which are typically used for writing repetitive code. These mixins automatically generate customized CSS rules for the element for which it is given. As a part of the final phase of implementation were created in preprocessor Stylus four general options of inserting icons into website. It was determined one basic variable that defines the base CSS properties common to all types of pasting. From this variable inherit all embedding options. For all options of inserting applies to all if the element has not been defined absolute position it is set to relative position. 8

10 Simple icon without text allows insertion of individual icon with adjustable scale. Mixin takes one required parameter - the variable of the icon from generated file. As an optional parameter takes Scale (positive real number, unless if not specified it has a value of 1) which is then multiplied by the basic icon size. Based on the input parameters are set by using CSS properties the dimensions of the element. The use can be for both block or inline elements without content. The icon is inserted via pseudo-class: after. Header of the mixin: icon(icon, scale = 1) Inline icon element designed for insertion icon into inline elements (eg. within a paragraph, for the simple hyperlinks, etc.). Mixin takes parameters: the name of the icon, scale (unless if not specified it has a value of 1) the size and value of the exterior right frame (unless if not specified it has a value of 0) to the right margin. It is suitable for use with inline elements. Header of the mixin: icon-inline(icon, scale = 1, marr = 0) Icon for pseudo-class :before designed for in-line and block elements with adjustable positioning of icon within the element. Mixin takes one required parameter the name of the icon. As an optional parameters are characteristics of horizontal (if not stated the value is right) and vertical (if not stated the value is middle) position and an offset value from zero coordinates of this property (unless if not specified it has a value 0). Header of the mixin: icon-after(icon, hor = right, ver = middle, x = 0, y = 0, scale = 1) Icon for pseudo-class :after similar solution of the previous inserting with the diference that paste of the icon is realized via pseudo-class :after. Header of the mixin: iconbefore(icon, hor = left, ver = middle, x = 0, y = 0, scale = 1) 3 Results Based on the findings it has been successfully implemented with selected implementation tools functional solution that automates the insertion of custom icon sets to the stylesheets. Embedding is ensured by calling the respective mixins with the necessary parameters. When calling Mixins it is not necessary to know the sequences of control characters of the individual icons in the font file. Quite enough to know the name of the icon that indicates in the font generator. Four options have been implemented for inserting icons to stylesheet. The first option is inserting a separate icons without content. The second option is the inserting an icon into inline content. The last two options are insertign icons with possibility of individual positioning within the used element. 9

11 It has been saccesfully designed and implemented the method that significantly simplifies the process of adding custom icon sets to the stylesheet and it has been achieved the stated goal. Conclusions Based on the findings regarding the possibility of inserting icons into the stylesheet, establishing the criteries and general process was designed and implemented a method that automates process for adding custom font icons into the stylesheet, which greatly facilitates the work of the coder or frontend developer. This solution uses to generate its own icon sets and manage their content online service IcoMoon which was chosen as an appropriate tool to create your own sets of icons. This application besides other things also generates a file in JSON format containing additional data suitable for further use. Inserting icons to the stylesheet and the document content is provided by pseudo-elements and pseudo-classes: before and: after. To implement the solution has been selected and used automation tool Grunt.js. In the configuration file was compiled role which take as input parameter a JSON file with object containings the data of generated icons. The output is the file with adjusted data. For further processing of these data it was necessary to use the benefits of the CSS preprocessors. As a suitable pre-processor was chosen Stylus, which in its simplicity and programmer nature is best suited for a given solution. In this preprocessor were implemented mixins that when they are called in the source code take the necessary parameters and ensures automatic insertion of the icons in the stylesheet and generate the appropriate CSS code. A similar solution could also be achieved by implementation in one of the other CSS preprocessors such as SASS. It would also be possible as automation tool to used Gulp. This solution ultimately automates inserting icons into the stylesheet and eases the work of frontend-developer or coder. This solution is fully functional and useful for web development. 10

12 References IcoMon, 2016: Using Generated Fonts. [Online]. Available at: [Accessed: 29. October, 2016]. MDN, [Online]. Available at: [Accessed: 26. October, 2016]. Meyer, E., A., 2007: CSS: Kompletní průvodce. Brno: Zoner Press, ISBN: Node.js, 2016: About Node.js. [Online]. Available at: [Accessed: 26. October, 2016]. Stylus, 2016: Mixins. [Online]. Available at: [Accessed: 28. October, 2016]. W3C, 2013: CSS Fonts Module Level 3. [Online]. Available at: 3/#font-face-rule. [Accessed: 28. October, 2016]. W3C, 2013: CSS Pseudo-Elements Module Level 4. [Online]. Available at: [Accessed: 29. October, 2016]. 11