Minor feature addition

User avatar
Valkier
Posts: 3325
Joined: Sun Jan 04, 2015 7:00 pm
Location: U.K.

Minor feature addition

Post by Valkier » Wed Feb 28, 2018 5:30 am

Ahoy shipmates,

You might have noticed a few new buttons showing up when making posts - and if not, please take a look! The following features are now available on the forum:

Float tags:

New tags: [float=left][/float] and [float=right][/float]


These two new tags allow you to "float" content, placed between the tags, to the left or right side of the page, and can be combined with [img][/img] tags for use with pictures. By default, using an img tag to include a picture within a body of text would result in the text body being broken up, interrupted by the picture, like so:

standard behaviourShow
Lorem ipsum dolor sit amet, definiebas conclusionemque eos in, ut iusto ceteros convenire eum. Ea dico iudico persecuti vix, dicit labitur tincidunt ea vis. Cu autem zril repudiare eum, est at justo velit. Meis ubique est ea. Eu magna inimicus sit.
In legendos vulputate vix, ius unum blandit et, ad aeterno persequeris delicatissimi usu. Ad mea sale dicunt ullamcorper. Usu at enim accusam, laoreet delicata qui te, no eam partem vocent. Vel eu utamur fabulas vocibus.
At assum voluptatibus pro, cum ne ridens facilisis repudiare. Et malorum meliore sea. Ea cum quas nonumy melius. His augue fabellas ad. Choro possim definitiones ex sed, in nihil iuvaret accusam eos. Qui ex solet iisque ponderum, dicam decore aperiam nam an. An enim porro sit.
Quo everti singulis patrioque an. Nibh meis cu qui. Eam ceteros interpretaris id, rebum porro facilisi eu ius. Utamur aliquam scribentur an vis, et assueverit temporibus vel. Ignota aliquid voluptua at sed.
Notice the big break in the text, around the cute fluffy owl potoo bird? (thanks Kat!). Consider the same example where the picture is contained within a float=left tag:
With float tagsShow

Lorem ipsum dolor sit amet, definiebas conclusionemque eos in, ut iusto ceteros convenire eum. Ea dico iudico persecuti vix, dicit labitur tincidunt ea vis. Cu autem zril repudiare eum, est at justo velit. Meis ubique est ea. Eu magna inimicus sit.
In legendos vulputate vix, ius unum blandit et, ad aeterno persequeris delicatissimi usu. Ad mea sale dicunt ullamcorper. Usu at enim accusam, laoreet delicata qui te, no eam partem vocent. Vel eu utamur fabulas vocibus.
At assum voluptatibus pro, cum ne ridens facilisis repudiare. Et malorum meliore sea. Ea cum quas nonumy melius. His augue fabellas ad. Choro possim definitiones ex sed, in nihil iuvaret accusam eos. Qui ex solet iisque ponderum, dicam decore aperiam nam an. An enim porro sit.
Quo everti singulis patrioque an. Nibh meis cu qui. Eam ceteros interpretaris id, rebum porro facilisi eu ius. Utamur aliquam scribentur an vis, et assueverit temporibus vel. Ignota aliquid voluptua at sed.
Isn't that just so lovely and nice and neat?

Usage: Just like you would treat any normal tag; place the [float=left] or [float=right] tag (depending on the alignment you want) before the content you want to float, and a closing [/float] tag after it. For example, [float=left][img]Image link here[/img][/float]

Limitations: The tags aren't perfect, and can interact with other page elements in unexpected ways. For example, they cannot wrap around [table][/table] tags - so tables cannot be floated. They will also "pop out" of a quote box if the tags are used inside a quote - though this does allow some interesting formatting, like so:
Fluffy bird:
A character profile Name: Some funny-looking potoo bird.
Agenda: To illustrate these new tags.
Some other category: Lorem ipsum dolor sit amet, definiebas conclusionemque eos in, ut iusto ceteros convenire eum. Ea dico iudico persecuti vix, dicit labitur tincidunt ea vis. Cu autem zril repudiare eum, est at justo velit. Meis ubique est ea. Eu magna inimicus sit.
Fun, no? Bear in mind also that things may appear differently when viewing on mobile.

Justify tags:

New tags:
[ justify ] and [ /justify ]
Exactly as the name implies, these tags let you fully justify any text that is placed between the tags. Justification aligns text to the left of the page (the default alignment) but automatically adjusts the spacing between words so that the right-hand margin of the text block is flush with the right hand side of the page too. I used the justify tags on this paragraph - compare the right hand side of this block of text to one of the earlier examples above. While this is a relatively minor tool, it's also fairly rudimentary, and hopefully it will help you all create some great looking posts. It's particularly obvious (and neat) when used in combination with the float tags introduced above:
Justified text around a right floated imageShow
Lorem ipsum dolor sit amet, definiebas conclusionemque eos in, ut iusto ceteros convenire eum. Ea dico iudico persecuti vix, dicit labitur tincidunt ea vis. Cu autem zril repudiare eum, est at justo velit. Meis ubique est ea. Eu magna inimicus sit. In legendos vulputate vix, ius unum blandit et, ad aeterno persequeris delicatissimi usu. Ad mea sale dicunt ullamcorper. Usu at enim accusam, laoreet delicata qui te, no eam partem vocent. Vel eu utamur fabulas vocibus. At assum voluptatibus pro, cum ne ridens facilisis repudiare. Et malorum meliore sea. Ea cum quas nonumy melius. His augue fabellas ad. Choro possim definitiones ex sed, in nihil iuvaret accusam eos. Qui ex solet iisque ponderum, dicam decore aperiam nam an. An enim porro sit. Lorem ipsum dolor sit amet, definiebas conclusionemque eos in, ut iusto ceteros convenire eum. Ea dico iudico persecuti vix, dicit labitur tincidunt ea vis. Cu autem zril repudiare eum, est at justo velit. Meis ubique est ea. Eu magna inimicus sit. In legendos vulputate vix, ius unum blandit et, ad aeterno persequeris delicatissimi usu. Ad mea sale dicunt ullamcorper. Usu at enim accusam, laoreet delicata qui te, no eam partem vocent. Vel eu utamur fabulas vocibus. At assum voluptatibus pro, cum ne ridens facilisis repudiare. Et malorum meliore sea. Ea cum quas nonumy melius. His augue fabellas ad. Choro possim definitiones ex sed, in nihil iuvaret accusam eos. Qui ex solet iisque ponderum, dicam decore aperiam nam an. An enim porro sit.
Usage: [justify]Add text you want justified here[/justify]

Limitations: This will only allow justification to the left hand side, unfortunately. Justifying to the right, or with a set width is possible - but unfortunately it is not handled well by zetaboards and can stretch the page. If you combine alignment tags such as [right] or [center] with the justify tags, whichever tag is used on the outside will take precedence; the inner tags will simply have no effect right now.

That's all! Please have a play yourselves; i'm sure there are some of you who can make some great looking apps with tools like these.
Last edited by Valkier on Mon Jun 07, 2021 3:40 am, edited 3 times in total.
CharactersShow
Aisu NaohiroJouninKirigakure no Sato[Unit 12] [HHD] [#BAE0E2] [#70CEE2]
Hachiya KotoriGeninIwagakure no Sato[Ukiyogenma Jinchuuriki] [H.N.K.][Gold] [#BF8040][Thread Tracker]

User avatar
Willoria
Posts: 12128
Joined: Fri Jul 31, 2009 8:00 pm
Location: Dancing with his Demons
User flair: Heart of Gold, Encased in Stone.
Contact:

Minor feature addition

Post by Willoria » Thu Mar 01, 2018 5:21 pm

Awesome, random question, I'm planning to do a basic coding how to this weekend, mind if I include this?

Also, that's a potoo bird, not an owl. They're hilarious looking. <3 (I only know this thanks to fluff, lol)
The Tales of the Aes Sedai Fukusha Reina - Iwagakure No Sato - Jounin - #EF2B2D Atsushi Cho - Tea Country - D Rank Samurai - #A34402 Hanzo - Sunagakure No Sato - Genin - #35C4AF

User avatar
Valkier
Posts: 3325
Joined: Sun Jan 04, 2015 7:00 pm
Location: U.K.

Minor feature addition

Post by Valkier » Thu Mar 01, 2018 10:03 pm

I stand corrected :)
And sure, feel free - rewrite & improve anything you wish, too.
CharactersShow
Aisu NaohiroJouninKirigakure no Sato[Unit 12] [HHD] [#BAE0E2] [#70CEE2]
Hachiya KotoriGeninIwagakure no Sato[Ukiyogenma Jinchuuriki] [H.N.K.][Gold] [#BF8040][Thread Tracker]

REPLY

Return to “Announcements and Information”

×