Ipinangako ko na sabihin ang higit pang tungkol sa pagguhit gamit ang font na 'Monospace'.
Ang 'Monospace' ay tila ang tanging font na kung saan napapanatili nito ang 'parehong' lapad ng character, puwang sa pagitan ng dalawang character - sa gayon ito ay karaniwang 'pareho' sa ilalim ng iba't ibang mga operating system.
(Ngunit tiyak na hindi sa ilalim ng lahat ng mga ito).
Kaya kahit na ang mga gumagamit ng Mac na may mas lumang mga bersyon ng Safari ay makakakita ng 'parehas' bilang sabihin natin ay nasa pinakabagong Bersyon ng Chrome. Idinagdag ko ang 'sabihin natin' dahil ang pinakabagong Chrome ay makalat ng kaunti sa ating mga disenyo
Kaya ang tanging problema ay ang mga 'Monospace' ay hindi mukhang solido katulad ng parehong pagguhit na ginawa gamit ang isang default na font.
Ngunit ito ay may ilang mahalagang mga pakinabang.
Hindi lamang mukang 'parehon' ng nasa ilalim ng iba't ibang mga browser. Ngunit gayundin! maaari kang ding gumuhit ng iyong mga disenyo gamit ang 1px, 1pt, 2px, 2pt at magmumukha pa rin itong parehas sa ilalim ng iba't ibang mga browser.
Ngunit! Ang parehong imahe na nilikha sa iba't ibang laki ng font ng 'Monospace' ay magkakaroon ng iba't ibang saturation ng kulay depende sa laki ng font.
Quote from: IMPORTANTENG UPDATE
Sa kasalukuyang bersyon ng Chrome/Mozilla/Safari browser inererekomenda ko na gumamit ng 2px Monospace font kapag gagawa ng BBCode.
Ito ay nasabi sa Aralin10.
Ito ay nasabi sa Aralin10.
Halimbawa:
Quote
░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Sukat=2pt | ░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Sukat=2px | ░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Sukat=1pt | ░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Sukat=1px |
Code:
[table]
[tr]
[td]
[font=Monospace][size=2pt][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=2pt[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=2px][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Sukat=2px[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=1pt][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Sukat=1pt[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=1px][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Sukat=1px[/b][/size][/center]
[/td]
[/tr]
[/table]
Aralin 11: "Advanced na Teknik sa Character Saving part I"
Quote from: 'Horror Movie Trailers'
THE BIGGEST NIGHTMARE
SLEEPLESS NIGHTS & HOURS SPENT ON SQUEEZING THE CODE...
4K LIMIT
SLEEPLESS NIGHTS & HOURS SPENT ON SQUEEZING THE CODE...
4K LIMIT
Ang bangungot ay nagsisimula sa pagdidisenyo ng signature para sa mga Senior, Hero and Legendary member 🙂
Suablit... hindi ito isang totoong bangungot - mas mukhang isang hamon 😎
Hayaan ninyo akong ibahagi sa iniyo ang ilang mga character saving na mga teknik na ginagamit ko upang labanan sa mga demonyo na may 4k na limitasyon
Susubukan kong gumawa ng isang uri ng listahan upang madaling itong mabasa (sana).
Hint 1: Hindi mo kailangang isara ang bawat tag sa table column.
Hindi mo kailangang isara ang bawat tag sa table column. Maaari mo itong palitan ng isa pang tag.
Halimbawa, sa halip na isara ang tag ng kulay, maaari mo lamang baguhin ang kulay gamit ang bagong tag.
Quote from: PAREHAS na resulta - MAS KAUNTING mga character
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[color=#7b2d2d]█[color=#382877]█[color=#3a6921]█
[/td]
[/tr]
[/table][/center]
Quote from: PAREHAS na resulta - MAS MARAMING mga character
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[/color][color=#7b2d2d]█[/color][color=#382877]█[/color][color=#3a6921]█[/color][/font][/size]
[/td]
[/tr]
[/table][/center]
Hint 2: Hindi mo kailangang isara ang anumang mga tag bago isara ang tag ng table column.
Hindi mo kailangang isara ang font, size etc. (kahit na anong) mga tag bago mo isara ang table column tag.
Quote from: PAREHAS na resulta - MAS KAUNTING mga character
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█
[/td]
[/tr]
[/table][/center]
Quote from: PAREHAS na resulta - MAS MARAMING mga character
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[/color][/font][/size]
[/td]
[/tr]
[/table][/center]
Hint 3: Magtakda ng pangunahing kulay bilang nauna...
Habang ikaw ay gumagawa ng kahit ano sa BBCode - sa logo atbp. - subukan tukuyin ang kulay na ginagamit nang madalas at ilagay ang tag nito sa harap.
Kapag ang ibang element ay nangangailangan ng ibang kulay, baguhin ang kulay at isara ang bagong tag ng kulay sa dulo ng element na iyon.
Ang mga susunod na character ay papailalim sa kapangyarihan ng unang kulay 😉
Mas madaling ipakita ito halimbawa ^_^:
Quote from: PAREHAS na resulta - MAS KAUNTING mga character
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=2px][color=#3a75bf]
█████████████████████████████████████
████████[color=#765aa2]█████████████████████[/color]████████
████████[color=#1d847f]█████████████████████[/color]████████
█████████████████████████████████████
[/td]
[/tr]
[/table][/center]
Quote from: PAREHAS na resulta - MAS MARAMING mga character
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=2px][color=#3a75bf]
█████████████████████████████████████
████████[color=#765aa2]█████████████████████[color=#3a75bf]████████
████████[color=#1d847f]█████████████████████[color=#3a75bf]████████
█████████████████████████████████████
[/td]
[/tr]
[/table][/center]
Quote from: PAREHAS na resulta - MAS MARAMING mga character
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=2px]
[color=#3a75bf]█████████████████████████████████████
[color=#3a75bf]████████[color=#765aa2]█████████████████████[color=#3a75bf]████████
[color=#3a75bf]████████[color=#1d847f]█████████████████████[color=#3a75bf]████████
[color=#3a75bf]█████████████████████████████████████
[/td]
[/tr]
[/table][/center]
Hint 4: Ilagay ang mga font face/font syle tag sa harap...
Kapag ikaw ay magtatakda ng font style at nais mong gamitin ito hanggang sa matapos ang table column, maglagay anumang mga styling tag sa harap.
Ngunit hindi bago mag URL at (kung) align (center/left/right) tag. Alam kong ito ay medyo kumplikado....
Kaya hayaan mo akong magbigay ng mga halimbawa
Quote from: Eksperimento 1
Code:
[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][b][font=Arial][size=25px][color=#000]Ang halimbawang teksto.[/b]
At iba isa pang linya ng teksto.
[/td]
[/tr]
[/table][/center]
Ang nangyari: Isinara ko ang 'Bold' tag at hindi sinasadya sa 'bold' tag closure ay ang ibang mga tag na may range of 'bold' tag ay nagsarado.
Ngunit kung ilipat natin ang mga ito sa labas ng 'bold' tag range ay mapapanatil nila ang kanilang properties 😉
Quote from: Eksperimento 2
Code:
[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][font=Arial][size=25px][b][color=#000]Ang halimbawang teksto.[/b]
At iba isa pang linya ng teksto.
[/td]
[/tr]
[/table][/center]
Ang nangyari: Parehong bilang ng mga character gaya ng sa halimbawang 1 - magkaibang mga resulta.
Napakaraming pagsulata ang kailangan upang mabanggit ang lahat ng mga posibleng sitwasyon kung saan maaari mong gamitin ito sa iba't ibang paraan upang mai-save ang ilang mga character.
Pagtuunan natin ang pinakamahalagang bagay na dapat tandaan:
Quote
Sa pamamagitan ng pagsasara ng anumang tag sa loob ng table column, isinasara mo ang lahat ng mga tag sa loob ng saklaw ng nakasarang tag.
Quote from: PAREHAS na resulta - MAS KAUNTING mga character
Code:
[center][table]
[tr]
[td]
[center][font=Arial][size=15px][b][url=https://bitcointalk.org]Iba pang advanced na halimbawa[/b]
[url=https://bitcointalk.org/index.php?topic=1727100.80]Ang pangalawang linya - At iba pang link ngunit parehas ng font face/sukat na hindi naka bold.
[/td]
[/tr]
[/table][/center]
Quote from: PAREHAS na resulta - MAS MARAMING mga character
Code:
[center][table]
[tr]
[td]
[center][b][url=https://bitcointalk.org][font=Arial][size=15px]Iba pang advanced na halimbawa[/url][/b]
[url=https://bitcointalk.org/index.php?topic=1727100.80][font=Arial][size=15px]Ang pangalawang linya - At iba pang link ngunit parehas ng font face/sukat na hindi naka bold.
[/td]
[/tr]
[/table][/center]
Quote from: PAREHAS na resulta - MAS KAUNTING mga character
Code:
[center][table]
[tr]
[td]
[center][b][font=Arial][url=https://bitcointalk.org][color=#12d][size=15px]Iba pang [color=#000]ADVANCED[/color] na halimbawa[/url]
[url=https://bitcointalk.org/index.php?topic=1727100.80][size=8px][color=#000]Ang pangalawang linya - [color=#12d]AT[/color] iba pang link ngunit parehong font face + bold
[/td]
[/tr]
[/table][/center]
Quote from: PAREHAS na resulta - MAS MARAMING mga character
Code:
[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][b][color=#12d][font=Arial][size=15px]Iba pang [color=#000]ADVANCED[color=#12d] na halimbawa[/url]
[url=https://bitcointalk.org/index.php?topic=1727100.80][b][font=Arial][size=8px][color=#000]Ang pangalawang linya - [color=#12d]AT[color=#000] iba pang link ngunit parehong font face + bold
[/td]
[/tr]
[/table][/center]
Mahirap matukoy nang malinaw kung paano gamitin ang hanay ng mga closed tag para sa ating mga benepisyo - lahat ay nakasalalay sa disenyo at mga pangangailangan - sa iba't ibang mga sitwasyon, maaari nating gamitin ito sa iba't ibang mga paraan.
Hint 5: Pantayin ang mga tag, isara ang ibang mga tag...
Code:
[table]
[tr]
[td]
[color=blue][font=Verdana][size=16px]Test text example
[center]Test text example bottom
[/td]
[/tr]
[/table]
Hint 6: Palitan ang transparent na element ng white space...
Quote from: PAREHAS na resulta - MAS KAUNTING mga character
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=10px]█████ █████
[/td]
[/tr]
[/table][/center]
Quote from: PAREHAS na resulta - MAS MARAMING mga character
Code:
[center][table]
[tr]
[td]
[font=Monospace][size=10px]█████[color=transparent]░░░░░░░░[/color]█████
[/td]
[/tr]
[/table][/center]