Textile - Formatting Posts & You!

Textile - Formatting Posts & You!

in Forum and Website Bugs

Posted by: Sparkles.8264

Sparkles.8264

Posting & You – Welcome to the Forums

Table of Contents:

Intro
Basic Font Styling
Paragraphs
Lists
External Content
Tables
Tips & Tricks
Advanced
End

Howdy folks =p

Firstly welcome to the GW2 forums! If you’re reading this then why on earth aren’t you playing the game!? Anywho – as you may have noticed the new forum software ANet has deployed for Guild Wars 2 has what I guess you could call a bit of a… steep learning curve if you’re wanting to do anything more advanced that a wall of text with the occasional text break. Since the forums have finally opened up fully I figured it was about time to post this.

Having a well-formatted post makes whatever you’re saying a lot easier to read, understand, and dissect – making it far more likely that everyone can get through whatever you’re saying without emptying a flask of scotch in the process.

If you’re posting feedback based on several different aspects of the game chances are that’s going to involve multiple development teams, letting them find the parts that are relevant to them just makes the entire process easier. The same goes for any sort of community post – if it’s cut into clear sections people are likely to get through it without asking for a TL;DR. It’s probably reddit’s fault you have to bother but bit late to do anything about that now huh.

TL;DR(lol) Hopefully this helps some of form pretty posts without punching your screens in the process. You can’t post with a shattered screen though I’m sure someone will boast about being able to PvP with one =/

~Basic Font Styling~

Top

Font styling can be used for single phrases or entire blocks of text and usually requires both opening and closing tags. That’s to say if you open a bold (*) then you need to specify where it ends with another bold (*)

Font Styling_____ Textile__________ _____BBCode__________ Result_____
Bold *Text* [b]Text[/b] Text
Italics _Text_ [i]Text[/i] Text
Underline +Text+ [u]Text[/u] Text
Size Advanced [size=0.5]Text[/size] [size=0.5]Text[/size]
Dash -- N/A
Strikethrough N/A [s]Text[/s] Text
Symbols (R) (C) (TM) N/A ® ©™
Color Advanced [color=blue]Text[/color] [color=blue]Text[/color]


~Paragraphs~

Top

Textile can be used to adjust both alignment and indentation within text blocks but before you do that you need to understand how paragraph formatting is designed.

Placing “p.” at the start of a body of text defines a paragraph, simple and as far as most end users are concerned it doesn’t do anything so there’s no need to use it. If you adjust this tag (as shown below) it applies paragraph-wide formatting until the next line break occurs (enter key).

p<.> — Aligns text to the left. (Mostly useless since you wont notice any real difference unless your formatting is elaborate)

p>. — Aligns text to the right.

p=. — Aligns text to the center of the page.

p<>. — Justifies text.

p(. — Indent from the left by 1em. (Increasing the amount of bracket characters in this tag increases the degree of indenting)

p). — Indent from the right by 1em. (Same as left indent except far less useful for most people for the same reason as left alignment.)

Note: Paragraph formatting using this method must be placed at the start of a text block, you cannot use it mid-sentence or inside a block of text. A space needs to be placed afterwards or it will be read as normal text.

Mountainwhale – Shadow of Apophis

(edited by Sparkles.8264)

Textile - Formatting Posts & You!

in Forum and Website Bugs

Posted by: Sparkles.8264

Sparkles.8264

~Lists~

Top

Lists are good for listing a series of points without abusing poor Professor Comma until he’s bleeding and broken. Textile’s method is actually pretty simple (hurray!)


  1. Ramble 1
    1. Indented Suggestion
    2. Indented Strawman Argument
  2. Ramble 2
  3. Ramble 3

# Waffle 1
## Indented Suggestion
## Indented Suggestion
# Waffle 2
# Waffle 3


  • Waffle 1
    • Indented Suggestion
    • Indented Suggestion
  • Waffle 2
  • Waffle 3

* Ramble 1
** Indented Suggestion
** Indented Strawman Argument
* Ramble 2
* Ramble 3

There is a bit of weird spacing going on at the moment, at least in Firefox, so hopefully that gets cleared up. Useful feature nonetheless.



~External Content~

Top

There will be times when you want to show people another web page, on this forum or another site entirely, or flick up an image for your fellow community members to look at. There are a few ways of doing both of these so it really comes down to personal preference.

Important: Please bear in-mind that everyone in this forum is still under NDA so you cannot host images/screenshots/content from the GW2 Alpha on other sites like Photobucket and link them here. Even if your album is private it’s still a no go. Arenanet should be putting up some attachment posting on this forum at some point or another.

Links:

Links can either be done with some simple copy/pasta or you can manually assign text to make them appear far more natural in your posts.

Input Output
http://guildwars2.com/en/ http://guildwars2.com/en/
"Guild Wars 2":http://guildwars2.com/en/ Guild Wars 2
[url="http://guildwars2.com/en/"]Guild Wars 2[/url] Guild Wars 2


 

Images:

Images can, theoretically, be embedded into posts using the “!!” or “[img][/img]” tags. Ran into a couple issues with those so testing it today – will update accordingly =)

Signatures:

Signatures help you personalize your posts by attatching text/content at the footer of any post you make. You can edit your signature by clicking Forum Profile (topright corner) – > Edit Profile. Just type away into the signature box and make sure to tick “Show Signature by Default” if it’s not already selected.
Will confirm if textile/images is able to be used in signatures and update sometime today hopefully.

~Tables~

Top

Tables are a handy way to present data and should be especially useful for theory-crafters or crazy people posting guides on Textile.

Basically each column is separated by a pipe " | " while each row is split by a break (enter key).

|This| is | a | table|
|Data 1| Data 2| Data 3| Data 4|

Becomes:


This is a table
Data 1 Data 2 Data 3 Data 4

It doesn’t take much to see this table’s spacing is a bit messy though and unfortunately there isn’t an easy way to address this. See: Tips & Tricks & Advanced Formatting for some methods on improving spacing and aesthetics.


~Tips & Tricks~

Top

Paragraphs — When using paragraph formatting p*. (* being whatever format you’re applying, see: Paragraphs) you can instead choose to use p*.. — e.g. p=.. Using two period characters causes the formatting to extend beyond the current text block (a line break wont stop it anymore) and will continue until another p*. is encountered. This is great if you have a bunch of small text blocks you want to apply formatting to in a row without having to spam copy/paste.

If you want to stop this extended formatting without replacing it with other unusual formatting then just use p.

Mountainwhale – Shadow of Apophis

(edited by Sparkles.8264)

Textile - Formatting Posts & You!

in Forum and Website Bugs

Posted by: Sparkles.8264

Sparkles.8264

Tables — In theory Textile should allow the cellspacing, margin, and padding attributes to be applied (More on Attributes in Advanced) either to an entire table using the table. prefix or to each cell with pipe formatting however this does not currently work. To get around spacing issues the best method I’ve found so far is to space your header columns out with underscores or other characters (as seen above)

Cell width on this forum is defined by the largest cell in each column so if you make the header cells wide using random characters like underscores it forces spacing on all cells below them. If someone manages to find a better workaround I’d love to hear about it =)



Spacing — Spacing sections is a bit tricky here as, to me at least, they always seem too close together. Tables especially have almost no spacing after them and you can’t just use Enter to force line breaks – doesn’t work.

The method I’ve ended up using mostly in this thread is the pre-formatted tag. <pre></pre> with several line breaks (enter keys) in between the tags. Although for some situations using the paragraph style bc.. is better please be aware it is a bit less forgiving – there is a pre.. tag as well but it bugs out so I’d avoid it. Those who know the difference between code blocks and PF text will know which suits them best – experiment! If you decide to use bc.. don’t forget you need to cut it off with another p. tag.


Unwanted Formatting — Due to Textile using special characters to apply styling some users will find their posts breaking if they’re using weird symbols (most of the Shift-Number keys are used in some way). To fix this you either need to disable Textile for your entire post (and hope no one quotes it) or create exceptions inside your post.

==*_[b]Content[/b]_*== – Using double-equals on each end of your content will stop Textile symbols from being parsed most of the time as shown to the left. It is a bit conditional though as I’ve noticed formatting this thread and I’d personally suggest you never use it for more than a sentence of content as it gets less reliable the larger the block.

<code>*_Content_*</code> — Code tags work much the same as double-equals however since they’re actual tags and not special characters themselves I’ve found them far more reliable for stopping messier text from being parsed. I’d suggest you use these with larger text blocks or anything with a lot of symbols in it. <notextile> is an alternative but isn’t very nice to type.

Always preview once you’ve used either of these to make sure it’s displaying like you want it to. If you’ve made an error or the tag hasn’t worked properly the more you format afterwards before noticing the harder it is to fix. Trust me.


~Advanced~

Top

Here’s some general pointers for those already familiar with writing in HTML. If you know enough to even want to use these then you don’t need a full explanation from me so I’ll keep things as brief as possible.

Span Tags — Span tags can be applied to any segment of text using the %Content% . Everytime you type a % more or less consider it a <span> and you should be able to apply a fair amount of standard formatting although some has been disabled – have a play around and see what works.

%{color: #cc99ff; font-size:20pt;}Random Content% can become Random Content this way.


Paragraph Formatting — Attributes can be defined for entire text blocks in the same way with some minor tweaks to paragraph tags. Simply include your styling at the end of the paragraph tag before the period and it will apply to the entire segment.

p={color: #cc99ff; font-size:10pt}. for example will not only center all text until the next line break, it will also change the color and apply 10pt font. Needless to say any attributes that work on this forum in span tags will work here. You can also apply the double period method mentioned in T&T to extend this formatting until another paragraph tag is found.

Mountainwhale – Shadow of Apophis

(edited by Sparkles.8264)

Textile - Formatting Posts & You!

in Forum and Website Bugs

Posted by: Sparkles.8264

Sparkles.8264

Table Formatting — The above methods also work in tables by adding formatting either to the entire table or to a particular cell.

To format a cell simply modify the pipe at the beginning of it like so. |{color: #ffcc33}. Data1 | Data2 | Data 3|

This will change the text color of Data 1 however it will not do anything outside of the cell you’re in. If you have a 4×15 table that could get pretty tedious. You can also use |/#. for rowspan & |\#. for colspan. The formatting on these isn’t the best at the moment especially for rowspan.

To apply formatting to an entire table you need to include a table. prefix just above your table. table{color: green}. is a basic example and would turn all cells within your table green – if you then apply cell-specific formatting to certain pipes it will override any table-wide formatting which is a fast way to format all your data and then just tweak the headings manually. Unfortunately a lot of the spacing/background attributes are disabled.

Row-specific formatting can be done also by prefixing a series of pipes that make up a row with formatting. E.g. {color:#ff6600}. |Data 1|Data 2| Data 3|



Anchors — Those of you who like to click things will have noticed the Table of Contents in this thread is based off anchor links. Linking to an anchor is easy with either of the URL methods so you shouldn’t have trouble there, creating an anchor still requires naming it and you can do that in Textile within a paragraph tag.

E.g. p=(#anchorName). This can be done with formatting as I have with my headers, including the formatting after the name is fine.

For those of you who choose to use anchors in their posts, and I seriously doubt many of you will bother but people posting guides might be interested in it, I do have a small request to make.

Please use unique and logical names – on the offchance that two of you both decide to use the anchor #top and then try to link to it on the same page everyone is going to be sad. If you’ve looked at the formatting of this thread (feel my pain…) you’ll have noticed every tag I’ve used ends with 8264 which happens to be my weird forum number. Making any sort of tag you use unique is just good practice – do it!



~End o.o~

Top

And that wraps that up.

Textile is flexible enough once you figure out how to use it which also happens to be the biggest issue this forum faces. Usability to someone new, especially those not familiar with forum software or HTML, can be pretty limited if you’re trying to do anything beyond a wall of text. Having said that I’ve seen some pretty solid improvements so far since the betas (especially with bbCode yay!) which will hopefully continue as time permits.

If you’re having trouble with any of this just flick a post up and I’m quite happy to take a look ^^ Same goes to anyone who finds something interesting that isn’t listed here, would love to hear it!

<3 to some of the folks at ANet (they know who they are & why) and my lovely guildies who had to endure my “colorful” vocabulary in TS while formatting this thread.

P.S. WTB Quaggan Plushie (The cute kind, not that hideous battle-quaggen nonsense)

P.S.S. This took ten hours to write/format ._. *Shakefist*

P.S.S.S Character limit, sorry about the multiposts =p

Seems text alignment and colors have stopped working since I wrote this, doing some more testing now.

Ta =p

Mountainwhale – Shadow of Apophis

(edited by Sparkles.8264)