UI Style Guide - Revision history

Octalot: Add new sections for tables of text

2023-06-12T10:14:52Z

Add new sections for tables of text

Octalot: Remove the "for C programmers" vs "for WML programmers" distinction, as most of the C is now WML in GUI2

2023-06-12T09:11:28Z

Remove the "for C programmers" vs "for WML programmers" distinction, as most of the C is now WML in GUI2

Pentarctagon: /* User Interface Style Guide */

2021-01-23T06:49:01Z

‎User Interface Style Guide

Pentarctagon at 06:48, 23 January 2021

2021-01-23T06:48:48Z

Iceiceice at 04:14, 7 April 2014

2014-04-07T04:14:57Z

Shadowm: /* Tooltips */ Advanced Preferences uses sentence case now

2011-10-30T21:52:30Z

‎Tooltips: Advanced Preferences uses sentence case now

Shadowm: /* Checkboxes */ Remove wrong fact

2011-10-30T21:51:51Z

‎Checkboxes: Remove wrong fact

Espreon: /* Checkboxes */

2011-10-30T21:20:33Z

‎Checkboxes

Espreon: /* Checkboxes */ Sentence case... is yummy...

2011-10-30T21:20:23Z

‎Checkboxes: Sentence case... is yummy...

Espreon: /* Sliders */ Sentence case... is awesome

2011-10-30T21:19:28Z

‎Sliders: Sentence case... is awesome

← Older revision		Revision as of 10:14, 12 June 2023
Line 75:		Line 75:

	If clicking a button will open a new window, add an unspaced ellipsis, except on the Wesnoth main menu, where ellipses are never used because it looks untidy.		If clicking a button will open a new window, add an unspaced ellipsis, except on the Wesnoth main menu, where ellipses are never used because it looks untidy.
		+
		+	===Tables With Columns===
		+
		+	When data is formatted into columns using separate UI components, for example the in-game Statistics Table, then the labels should not have colons. This also applies to the table headings, for example the in-game Status Table.
		+
		+	===Tables In Plain Text===
		+
		+	Sometimes data is concatenated into text, with one "Label: Value" pair on each line, but for some reason it isn't formatted into a table with columns. The label should be in '''sentence case''', unless the label's string is itself data (a terrain type name, damage type, etc).
		+
		+	For translation, the label should include the colon, but ideally not the whitespace.
		+	_("Weapon range:")
		+	_("Damage type:")
		+
		+	Alternatively, make the entire line one string using interpolation. This is preferred when the value should include a measurement unit or a percentage sign:
		+	_("Required XP: $xp")
		+	_("Chance to hit: $chance\|%")
		+	_("Reward: $amount\| gold")

	===Sliders===		===Sliders===

@@ Line 3: / Line 3: @@
 This is a draft style guide covering the Wesnoth game user interface. For general C coding guidelines, see [[CodingStandards]]. There are some typography issues also covered in this guide, but please cross-refer to the [[Typography Style Guide]] as well.
-The Wesnoth UI (user interface) has a mixed setup. Part of it is hard-coded within the game's source code, which means you need to be able to at least read C program code to understand what is going on. The remainder is stored in a variety of WML files, which are easier for non-programmers to read and can be altered without having to recompile the program. With the ongoing Wesnoth GUI2 project http://forums.wesnoth.org/viewtopic.php?f=2&t=29640&hilit=GUI2&start=0 this setup will be simplified, making custom 'skins' easier to create. Note that this guide may change significantly once the version 2 GUI comes fully on-line.
+The Wesnoth UI (user interface) has a mixed setup. Most of the layout and text is stored in WML files in the 'data/gui/' directory tree, which can be altered without having to recompile the program (press F5 on the title screen to rebuild the cache, but for UI you'll likely have to restart Wesnoth before the changes take effect). Part of it is hard-coded within the game's source code, which means you need to be able to at least read C program code to understand what is going on. Removing existing components from a UI dialog will normally require changes to the C code, as it the C code generally treats missing components as an error.
 ==General Principles==
@@ Line 19: / Line 19: @@
 A minor niggle is that some of the buttons in the Wesnoth main menu ought to be marked with ellipses because they open sub-windows.
-==For C Programmers==
+==Situations==
 ===Window Titles===
@@ Line 40: / Line 35: @@
   Title: Loading Addons
   Subhead: Loading [programmatically generated name of the add-on currently being processed]
 ===Window Subheads===
@@ Line 133: / Line 126: @@
 While it might be nice to display the default value for every checkbox, widget and so on a player might alter, this can make the tooltips needlessly untidy. The recommended practice is not to mindlessly add this information to every tooltip, but to provide it wherever a changed setting could cause unexpected behaviour, or wherever the original value is hard to retrieve. For example, it's easy to tell whether 'Floating Labels' is on or off. On the other hand, the name (and possibly port number) for the default add-on server should be stored in the tooltip, so that a user can restore it if necessary.
 [[Category:Development]]

@@ Line 1: / Line 1: @@
 == User Interface Style Guide ==
-This is a draft style guide covering the Wesnoth game user interface. For general C coding guidelines, see [[CodingStandards]]. For WML coding, see the [[WML Style Guide]]. There are some typography issues also covered in this guide, but please cross-refer to the [[Typography Style Guide]] as well.
+This is a draft style guide covering the Wesnoth game user interface. For general C coding guidelines, see [[CodingStandards]]. There are some typography issues also covered in this guide, but please cross-refer to the [[Typography Style Guide]] as well.
 The Wesnoth UI (user interface) has a mixed setup. Part of it is hard-coded within the game's source code, which means you need to be able to at least read C program code to understand what is going on. The remainder is stored in a variety of WML files, which are easier for non-programmers to read and can be altered without having to recompile the program. With the ongoing Wesnoth GUI2 project http://forums.wesnoth.org/viewtopic.php?f=2&t=29640&hilit=GUI2&start=0 this setup will be simplified, making custom 'skins' easier to create. Note that this guide may change significantly once the version 2 GUI comes fully on-line.
 ==General Principles==

← Older revision		Revision as of 06:48, 23 January 2021
Line 1:		Line 1:
−	=User Interface Style Guide=	+	== User Interface Style Guide ==

	This is a draft style guide covering the Wesnoth game user interface. For general C coding guidelines, see [[CodingStandards]]. For WML coding, see the [[WML Style Guide]]. There are some typography issues also covered in this guide, but please cross-refer to the [[Typography Style Guide]] as well.		This is a draft style guide covering the Wesnoth game user interface. For general C coding guidelines, see [[CodingStandards]]. For WML coding, see the [[WML Style Guide]]. There are some typography issues also covered in this guide, but please cross-refer to the [[Typography Style Guide]] as well.

← Older revision		Revision as of 04:14, 7 April 2014
Line 141:		Line 141:

	===Window titles		===Window titles
		+
		+	[[Category:Development]]

@@ Line 122: / Line 122: @@
 Examples:
-  name=_"Ping Timeout (seconds)"
+  name=_"Ping timeout (seconds)"
   description=_"How long to wait for a ping reply before giving up. 0 means wait indefinitely"
-  name=_"Auto-open Whisper Windows in Lobby"
+  name=_"Auto-open whisper windows in lobby"
-  description="When you are sent a whisper message, it appears in a pop-up window"
+  description=_"When you are sent a whisper message, it appears in a pop-up window"
 (WML code)

@@ Line 96: / Line 96: @@
 ===Checkboxes===
-Checkbox labels use '''sentence case''' and are followed by a colon. Use the floating tooltip function to explain what the checkbox is for, if it isn't obvious, and the default value. Do ''not'' just paraphrase the checkbox label text, instead try to answer the question of what a player actually sees when the option is turned on.
+Checkbox labels use '''sentence case'''. Use the floating tooltip function to explain what the checkbox is for, if it isn't obvious, and the default value. Do ''not'' just paraphrase the checkbox label text, instead try to answer the question of what a player actually sees when the option is turned on.
 Example:
 Do '''not''' use:
-  Floating labels: _X_
+  _X_ Floating labels
   Tooltip: Turns on floating labels
 Instead use:
-  Floating labels: _X_
+  _X_ Floating labels
   Tooltip: Show floating text above a unit when it is damaged or healed

@@ Line 85: / Line 85: @@
 ===Sliders===
-A slider should include a text label on the left describing the value it contains, followed by a colon. The label should be in '''title case'''. On the right, the current numeric slider value should be given, ''with units'', if any. The labels and the values should be left-aligned; the sliders should all be vertically aligned with one another. The existing UI widgets library already handles the alignment issues for you. Use the floating tooltip function to explain what the slider is for, the units, and the maximum, minimum and default permissible values. Where the function of the slider is glaringly obvious, you can just provide the minimum, maximum and default values.
+A slider should include a text label on the left describing the value it contains, followed by a colon. The label should be in '''sentence case'''. On the right, the current numeric slider value should be given, ''with units'', if any. The labels and the values should be left-aligned; the sliders should all be vertically aligned with one another. The existing UI widgets library already handles the alignment issues for you. Use the floating tooltip function to explain what the slider is for, the units, and the maximum, minimum and default permissible values. Where the function of the slider is glaringly obvious, you can just provide the minimum, maximum and default values.
 Examples:
   Players:    ====|========= 3
-  Map Width:  ========|===== 50 hexes
+  Map width:  ========|===== 50 hexes
-  Map Height: ======|======= 40 hexes
+  Map height: ======|======= 40 hexes
   Hilliness:  ===|========== 40