With the scale transformation, it is possible not only to scale something but also to mirror it if to apply negative values for x or y arguments in the scale.įor example, if you want to mirror vertically something you need to apply to your :Īnd if you want to mirror horizontally apply: In the *.svg, it is possible to apply similar attributes to CSS one. In the fonts, all the glyphs are shipped in the reverted vertical state (haven’t found any article that contains useful technical info why it is done this way – if you know any – leave the link in the comment, please). You can notice that the sign is not exactly as we have expected. See the Pen Glyph after changing to the path by Olena Sovyn ( on CodePen. But it is not enough, I should also need to wrap the resulting code with the tag and scale it properly using the different attributes in the tag like width, height, and viewBox ( check this article in the CSS-Tricks to know more about the scaling in the *.svg): I am a pretty newbie with the *.svg, but from the articles that I have read (check one of the above), I figure out that I can freely to change the glyph in the notation to the path. Let’s now check how for example the separate glyph path will look like in that font file: Also, I have found not a lot but quite a few articles from the people, that we’re trying to achieve the same thing as me (for example,, ). Then I remembered that for the iOS font is shipped in the *.svg format, so then I thought even with my smallest knowledge of the *.svg I can make some magic and to obtain the separate icon (check TinyMCE font in the *.svg format here – ). But it was not so easy, and I did not find any program that was easy to use for this purpose (if you know any, please, write about it in the comments). I was trying to look up the online resources that give an ability to obtain the separate signs from the whole font file. After spending some time on the searching, I came to the idea that there should be a smarter way to do this.ģ) Obtain separate icons from the font that was used for the icons itself (it was the way I have used and was happy with it). I wasn’t very fancy about this idea, as the font weights a lot, and bring it to the project only for showing three icons doesn’t make a lot of sense from my perspective.Ģ) Find free icons for the buttons that are similar to the ones used in the TinyMCE. I will go through some ideas on how this can be done.ġ) Use the same font in the newly created rich editor. Icons that are used on the button in the TinyMCE editor are done using the specific TinyMCE font that is part of the TinyMCE package. One of the interesting points was to create buttons in the editor toolbar similar to the ones that were in the TinyMCE editor. I wanted to make this transfer as less noticeable as possible for our end-users in terms of the UI. Recently I have moved out rich text editor from the TinyMCE to the Draft.js.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |