|
Title: Drawing basics with BBCode Post by: Holmy on June 04, 2018, 07:56:06 PM Drawing basics with BBCode-level I
When you want to convert an image to BBCode, you have to remember a few very important rules I have personally tested many different methods and so am sure that the best method is to draw manually by pixel. Converters / generators BBCode-images have not shown the proper result, and I will not recommend them, as well as he did not use them. Thanks to almost 3 years of signature creation experience with BBCode, I'm sure that if we want good compatibility of our signature with different OS and browsers, we should use 2PT characters to create BBCode images. Here are the best ASCII characters I advise you to use for BBCode images: "▀ ▄ █ ▌ ▐ ░ ▒ ▬ ▂ ▃ ▅ ▆ " Most often I use " █ " (and always in 2PT size) which is the most compatible with different browsers and OS. Why don't I use 2px, 1pt or 1px? If everyone will use Google Chrome, then it is possible to use 2px, 1px or something less than 2pt. You can check yourself in your BBCode images. Unfortunately, characters that are less than 2pt in the signature will look strongly stretched or compressed depending on the browser and OS, which means that in reality only a portion of the users will see a good correct signature. The design of BBCode signatures is not as flexible as HTML + CSS, the appearance of which may also depend on the browser. Experiment: Draw a square in BBCode. Use the same ASCII character " █ " with different sizes: 2pt, 2px, 1pt, 1px. See what happened under different browsers: Chrome / Mozilla / Opera / Edge/Safari / etc.. Quote 2pt→ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ 2px→ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ 1pt→ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ 1px→ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ Note that the square of the 2PT characters looks the same in most browsers. This is the most compatible option. Other squares of the same symbol, but of a different size, in different browsers look either compressed or stretched. ASCII characters in 2pt are not 100% compatible, but after years of experimentation I'm sure it's the best option. :o :o :o :o :o :o :o :o :o :o |