Typographical Guidelines: Difference between revisions

From KDE Wiki Sandbox
(Add info about including images in translatable sections)
No edit summary
 
(66 intermediate revisions by 10 users not shown)
Line 1: Line 1:
''There are separate pages explaining '''[[PageLayout|Page Layout]]''' and '''[[Toolbox|syntax]]''' with example code.''
<languages />
<translate>


Adhering to these typographic guidelines will ensure that your documentation can be accurately and easily exported for translation purposes.
<!--T:1-->
''There are separate pages explaining [[Special:myLanguage/PageLayout|Page Layout]] and [[Special:myLanguage/Toolbox|syntax]] with example code.''


==Bold Text==
<!--T:2-->
{{Remember|2=Important|1=Adhering to these typographic guidelines will ensure that your documentation can be accurately and easily exported for translation purposes. Some guidelines may not be applicable for non-English languages. These should be noted on specific language pages, linked from [[Special:myLanguage/Translation_Workflow|Translation Workflow]].  If no such page exists for your language, please add one and make guidelines there.}}


==Bold Text== <!--T:3-->
<!--T:4-->
Use bold text to highlight
Use bold text to highlight
:* Window titles
* Window titles
:* Common labels that are not user-configurable
* Common labels that are not user-configurable
:* Icon captions
* Icon captions
:* Program names
* Program names


:For example:
<!--T:5-->
For example:


:* Highlighting a selection of text will copy it to '''klipper'''.
<!--T:6-->
* Highlighting a selection of text will copy it to '''Klipper'''.


==Italic Text==
==Italic Text== <!--T:7-->


<!--T:8-->
Use italic text to emphasise  
Use italic text to emphasise  
:* Words or phrases as in general writing.
* Words or phrases as in general writing.
:* Titles when referencing other works.
* Titles when referencing other works.
:* The first use of an unfamiliar word.
* The first use of an unfamiliar word.


:Some examples:
<!--T:9-->
:* ''Save your work at this point.''
Some examples:
:* Details can be found in ''Samba 3 by Example''....
* ''Save your work at this point.''
:* KDE Manuals are in ''Docbook'' format.
* Details can be found in ''Samba 3 by Example''....
* KDE Manuals are in ''Docbook'' format.


{{Tip|1='''Programs''' are launched by users, ''components'' are used by programs}}
<!--T:10-->
{{Tip|1=''Programs'' are launched by users, ''components'' are used by programs}}


==Combined Bold and Italic Text==
==Combined Bold and Italic Text== <!--T:11-->


<!--T:12-->
Use this combination for replaceable or variable text.
Use this combination for replaceable or variable text.


<!--T:13-->
Some examples:
Some examples:
:* To connect to your remote server, type '''ssh ''username@domain.name''''' in Konsole.
* To connect to your remote server, type <code>ssh</code> '''''username@domain.name''''' in '''Konsole'''.
:* In rpm-based distributions, the command ''rpm -q '''packagename''''' will result in '''''package-version-release'''''.
* In rpm-based distributions, the command <code>rpm -q</code> '''''packagename''''' will result in '''''package-version-release'''''.


==Mono-spaced Text==
==Mono-spaced Text== <!--T:14-->


Code should be presented in mono-spaced text, boxed, as shown below.  Input text should use the background colour "aliceblue".  For output text, the background colour should be white.   
<!--T:15-->
Code should be presented in mono-spaced text, usually boxed, as shown below.  Input text will be on a pale yellow background.  For output text, the background colour will be violet-grey.   


* Code, whether single lines or blocks,use templates to ensure consistency
<!--T:16-->
* Code, whether single lines or blocks, use templates to ensure consistency


* Check '''Edit''' to see the code to use the Input template:
<!--T:17-->
 
* Use the Input template like this: {{Input|1=<nowiki>{{Input|1=<nowiki>
{{Input|1=
qdbus org.kde.NepomukServer /nepomukserver org.kde.NepomukServer.quit
rm -r ~/.kde/share/apps/nepomuk
rm -r ~/.kde4/share/apps/nepomuk
nepomukserver&lt;/nowiki>}}</nowiki>}} This will display like this: {{Input|1=<nowiki>
qdbus org.kde.NepomukServer /nepomukserver org.kde.NepomukServer.quit
qdbus org.kde.NepomukServer /nepomukserver org.kde.NepomukServer.quit
rm -r ~/.kde/share/apps/nepomuk
rm -r ~/.kde/share/apps/nepomuk
rm -r ~/.kde4/share/apps/nepomuk
rm -r ~/.kde4/share/apps/nepomuk
nepomukserver}}
nepomukserver</nowiki>}}
 
 
<!--T:18-->
* Output works the same way: {{Output|1=<nowiki>{{Output|1=<nowiki>terminal output
is also shown as code,
but on a grey background&lt;/nowiki>}}</nowiki>}} which displays as {{Output|1=<nowiki>terminal output
is also shown as code,
but on a grey background</nowiki>}}
 
<!--T:19-->
{{Note|1=Note the use of <code><nowiki>1=<nowiki> some text &lt;/nowiki></nowiki></code>. Occationally, parts of literal displays may confuse the wiki parser. The <code><nowiki><nowiki>...</nowiki></nowiki></code> block protects against that. Also if something like <tt>n=</tt> appears in the literal body, the template parser may get confused. The initial <code>1=</code> protects against that. Otherwise this markup has no effect. In short: it can't hurt, and it protects against the possibility of some nasty side effects.}}
 
<!--T:20-->
* Starting an Input or Output template on a new line will break the display format if it is within lists.  Simply continue on the same line if you need to correct this.
 
<!--T:21-->
* You can also combine input/output areas with [http://www.mediawiki.org/wiki/Extension:SyntaxHighlight_GeSHi GeSHi syntaxhiglighting]. An input area like this {{Input|1=<nowiki>{{Input|<syntaxhighlight lang="php" line>
# Initialise common code
$preIP = dirname( __FILE__ );
require_once( "$preIP/includes/WebStart.php" );
</syntaxhighlight>}}</nowiki>
}} will result in {{Input|<syntaxhighlight lang="php" line>
# Initialise common code
$preIP = dirname( __FILE__ );
require_once( "$preIP/includes/WebStart.php" );
</syntaxhighlight>}}
 
<!--T:22-->
* Single code words can be kept in-line by using {{Input|1=<nowiki><code></code></nowiki>}}  It will <code>display</code> like this. Note, that if the <nowiki><code></nowiki> tag is immediately preceded by a newline character, it will not display properly.
 
<!--T:23-->
* File names and paths should use the Path template (see below).
 
<!--T:49-->
{{Warning|1=In-line code markup should be short! It looks strange - and ugly - if a string of code words is split between lines. And remember: even if it looks good in your browser, not everyone uses the same screen size! And even if your text looks good on all screen sizes translations may still suffer. It is best to use the Input template for code unless it is really short.}}
 
<!--T:50-->
{{Note|1=Please avoid using shell commands or other code words as verbs. This does not translate well. Always treat code words as proper names.}}
 
==Block Quotes== <!--T:24-->
 
<!--T:25-->
The tags <nowiki><blockquote></nowiki> and <nowiki></blockquote></nowiki> should be used when quoting other works or other pages.  This produces a proportional italic font, with some padding.
 
<!--T:26-->
<blockquote>Here is an example of the display that you get by using the blockquote tags.</blockquote>
 
==Text in Section Headers== <!--T:27-->
 
<!--T:28-->
Even though the criteria above may be met, do not use Bold text in section headers or in links.
 
==Text in Information, Note, Tip or Warning Templates== <!--T:29-->
 
<!--T:30-->
Bold text should be avoided in the text within these templates.  Italic text for emphasis may still be used - use sparingly for maximum effect.
 
</translate><span id="Lists"></span><translate>
 
==Lists== <!--T:31-->
 
<!--T:32-->
You can have various kinds of lists in your pages &mdash; bulleted, numbered or itemized. Find details on the [[Special:myLanguage/Toolbox#Bulleted Lists|Toolbox]] page.
 
</translate><span id="Keeping things together"></span><translate>
 
==Keeping things together== <!--T:33-->
 
<!--T:34-->
After your text is written some markup is automatically added by the translation system. This means that whenever it sees a blank line, it starts a new unit. When your text is presented to translators, they typically see it one unit at a time, so it is important not to leave a blank lines in the middle of something that should be treated as a unit. Normally an entire paragraph should be kept in a single unit; and under no circumstance should a sentence be split between units!
 
<!--T:35-->
If you need a linebreak in the middle of a section, the preferred way to achieve this without breaking units is to use <nowiki><br /></nowiki> at the end of the line where you want to break to occur (not on a new line). If you need space between the lines add <nowiki><br /><br /></nowiki>.
 
</translate><span id="Unbalanced brackets"></span><translate>
 
==Unbalanced brackets== <!--T:36-->
 
<!--T:37-->
<!--}}-->The translation system marks any translated unit as incompletely translated if it contains any kind of unbalanced brackets. If you need to have unbalanced brackets in your text, please add a balancing bracket in a comment tag, like this:<br />
{{Input|1=
<nowiki><!-- }} -->{{ A line
 
<!--T:38-->
Another line}}<!-- {{ --></nowiki>
}}<!--{{-->
This goes for all kinds of brackets, even ordinary parentheses. (Of course it is normally better to avoid blank lines within a mark up unit - see [[Special:myLanguage/Typographical_Guidelines#Keeping things together|Keeping things together]].)
 
==Special Tags== <!--T:39-->
 
=== Key presses and menu selections === <!--T:51-->
 
<!--T:40-->
* <nowiki> <keycap></nowiki> and <nowiki> </keycap> </nowiki> denote (keyboard) key names e.g. <keycap>Enter</keycap>
* <nowiki><keycap></keycap></nowiki> can also be used around groups of keys to be used concurrently, e.g. <keycap>Ctrl + Alt + F1</keycap> to launch a virtual terminal. (Note that "(space)+(space)" is used to link keys to be pressed concurrently).
* Sequences of menu choices should use <nowiki> <menuchoice> </nowiki>and <nowiki> </menuchoice> </nowiki> for example <menuchoice> View -> Message List -> Aggregation -> Standard Mailing List </menuchoice>
* In general, if the user needs to choose an element, even if it is not in a menu, the <nowiki><menuchoice></menuchoiсe></nowiki> markup should be used.</translate>
<translate>
<!--T:52-->
* If you are contributing to a manual page, you should always use the markup describes above. For other pages, though, there is a template to enter menu selections: <nowiki>{{Menu|Top|sub|...}}</nowiki>. Fx, <nowiki>{{Menu | View | Message List | Aggregation | Standard Mailing List}}</nowiki> yields {{Menu | View | Message List | Aggregation | Standard Mailing List}}</translate>
<translate>
<!--T:53-->
* If you want to use the <nowiki><menuchoice></nowiki> but use &rarr; in stead of ->, you write <code>& rarr;</code> (without a space between '&' and r!) as in <nowiki><menuchoice> View</menuchoice> & rarr; <menuchoice>Message List</menuchoice></nowiki> which yields <menuchoice> View</menuchoice> &rarr; <menuchoice>Message List</menuchoice>. (Note, that the &rarr; character has to be outside of the menuchoice tags to be shown properly
 
=== Files and file paths === <!--T:54-->
 
<!--T:55-->
Traditionally, file names and paths have been marked up between <nowiki><tt>...</tt></nowiki> tags.
 
<!--T:56-->
{{Input|1=<nowiki><tt>~/.kde/share</tt></nowiki>}}
 
<!--T:57-->
yields
 
<!--T:58-->
{{output|1=<tt>~/.kde/share</tt>}}
 
<!--T:59-->
There is now also a template for this, which should be preferred in new content for ordinary UserBase pages (but not for manual pages, please!):
 
<!--T:60-->
{{Input|1=<nowiki>{{Path | ~/.kde/share }}</nowiki>}}
 
<!--T:61-->
yields
 
<!--T:62-->
{{Output|1={{Path | ~/.kde/share }} }}


* Output works the same way:
== The Problematic Pipe == <!--T:45-->


{{Output|1=
<!--T:46-->
terminal output
In some situations the pipe symbol can't be used - for instance when adding parameters into a template.  In any such case, please use <nowiki>{{!}}</nowiki> which will display as a pipe symbol. For example, if you want to display a command line containing the pipe character using the <nowiki>{{Input|...}}</nowiki> template, the simplest way to do it is this: <code><nowiki>{{Input|1=cmd1 {{!}} cmd2}}</nowiki></code> which displays {{Input|1=cmd1 {{!}} cmd2}}
is also shown as code, but
on a white background}}


==Special Tags==
<!--T:47-->
<br />If you just write <code><nowiki>{{Input|cmd1 | cmd2}}</nowiki></code> you get instead {{Input|cmd1 | cmd2}}
the problem being, that <code>cmd2</code> is seen as a second parameter to the template, which in this case is not used.


:* <nowiki> <keycap></nowiki> and <nowiki> </keycap> </nowiki> denote (keyboard) key names e.g. <keycap>Enter</keycap>
<!--T:48-->
:* <nowiki><keycap></keycap></nowiki> can also be used around groups of keys to be used concurrently, e.g. '''Ctrl+Alt+F1''' to launch a virtual terminal. (Note that Note that "+" is used to link keys to be pressed concurrently).
In many cases, you can also enclose the text containing the pipe character between <nowiki><nowiki>...</nowiki> </nowiki> tags, like this <code><nowiki>{{Input|1=<nowiki>cmd1 | cmd2</nowiki></nowiki><nowiki>}}</nowiki></code>, which also displays {{Input|1=<nowiki>cmd1 | cmd2</nowiki>}}
:* Sequences of menu choices should use <nowiki> <menuchoice> </nowiki>and <nowiki> </menuchoice> </nowiki> for example <menuchoice> View -> Message List -> Aggregation -> Standard Mailing List </menuchoice>
:(Note the use of "(space)->(space)" to denote the sequence of clicks.)


==Translatable Content==
==Translatable Content== <!--T:42-->


Everything that is translatable is contained within <nowiki><translate> and </translate></nowiki> tags.  In most cases any images should be contained within the translatable section, as it is sometimes necessary to us localised versions of the images to explain a point.  The rule of thumb is "If in doubt, include it!".
<!--T:43-->
Everything that is translatable is contained within &lt;translate> and &lt;/translate> tags.  In most cases any images should be contained within the translatable section, as it is sometimes necessary to use localised versions of the images to explain a point.  The rule of thumb is "If in doubt, include it!".


<!--T:44-->
[[Category:Contributing]]
[[Category:Contributing]]
</translate>

Latest revision as of 20:14, 7 May 2021

There are separate pages explaining Page Layout and syntax with example code.

Important
Adhering to these typographic guidelines will ensure that your documentation can be accurately and easily exported for translation purposes. Some guidelines may not be applicable for non-English languages. These should be noted on specific language pages, linked from Translation Workflow. If no such page exists for your language, please add one and make guidelines there.


Bold Text

Use bold text to highlight

  • Window titles
  • Common labels that are not user-configurable
  • Icon captions
  • Program names

For example:

  • Highlighting a selection of text will copy it to Klipper.

Italic Text

Use italic text to emphasise

  • Words or phrases as in general writing.
  • Titles when referencing other works.
  • The first use of an unfamiliar word.

Some examples:

  • Save your work at this point.
  • Details can be found in Samba 3 by Example....
  • KDE Manuals are in Docbook format.
Tip
Programs are launched by users, components are used by programs


Combined Bold and Italic Text

Use this combination for replaceable or variable text.

Some examples:

  • To connect to your remote server, type ssh username@domain.name in Konsole.
  • In rpm-based distributions, the command rpm -q packagename will result in package-version-release.

Mono-spaced Text

Code should be presented in mono-spaced text, usually boxed, as shown below. Input text will be on a pale yellow background. For output text, the background colour will be violet-grey.

  • Code, whether single lines or blocks, use templates to ensure consistency
  • Use the Input template like this:
    {{Input|1=<nowiki>
    qdbus org.kde.NepomukServer /nepomukserver org.kde.NepomukServer.quit
    rm -r ~/.kde/share/apps/nepomuk
    rm -r ~/.kde4/share/apps/nepomuk
    nepomukserver</nowiki>}}
    This will display like this:
    qdbus org.kde.NepomukServer /nepomukserver org.kde.NepomukServer.quit
    rm -r ~/.kde/share/apps/nepomuk
    rm -r ~/.kde4/share/apps/nepomuk
    nepomukserver


  • Output works the same way:
    {{Output|1=<nowiki>terminal output 
    is also shown as code, 
    but on a grey background</nowiki>}}
    which displays as
    terminal output 
    is also shown as code, 
    but on a grey background
Note
Note the use of 1=<nowiki> some text </nowiki>. Occationally, parts of literal displays may confuse the wiki parser. The <nowiki>...</nowiki> block protects against that. Also if something like n= appears in the literal body, the template parser may get confused. The initial 1= protects against that. Otherwise this markup has no effect. In short: it can't hurt, and it protects against the possibility of some nasty side effects.


  • Starting an Input or Output template on a new line will break the display format if it is within lists. Simply continue on the same line if you need to correct this.
  • You can also combine input/output areas with GeSHi syntaxhiglighting. An input area like this
    {{Input|<syntaxhighlight lang="php" line>
    # Initialise common code
    $preIP = dirname( __FILE__ );
    require_once( "$preIP/includes/WebStart.php" );
    </syntaxhighlight>}}
    will result in
    # Initialise common code
    $preIP = dirname( __FILE__ );
    require_once( "$preIP/includes/WebStart.php" );
    
  • Single code words can be kept in-line by using
    <code></code>
    It will display like this. Note, that if the <code> tag is immediately preceded by a newline character, it will not display properly.
  • File names and paths should use the Path template (see below).
Warning
In-line code markup should be short! It looks strange - and ugly - if a string of code words is split between lines. And remember: even if it looks good in your browser, not everyone uses the same screen size! And even if your text looks good on all screen sizes translations may still suffer. It is best to use the Input template for code unless it is really short.


Note
Please avoid using shell commands or other code words as verbs. This does not translate well. Always treat code words as proper names.


Block Quotes

The tags <blockquote> and </blockquote> should be used when quoting other works or other pages. This produces a proportional italic font, with some padding.

Here is an example of the display that you get by using the blockquote tags.

Text in Section Headers

Even though the criteria above may be met, do not use Bold text in section headers or in links.

Text in Information, Note, Tip or Warning Templates

Bold text should be avoided in the text within these templates. Italic text for emphasis may still be used - use sparingly for maximum effect.

Lists

You can have various kinds of lists in your pages — bulleted, numbered or itemized. Find details on the Toolbox page.

Keeping things together

After your text is written some markup is automatically added by the translation system. This means that whenever it sees a blank line, it starts a new unit. When your text is presented to translators, they typically see it one unit at a time, so it is important not to leave a blank lines in the middle of something that should be treated as a unit. Normally an entire paragraph should be kept in a single unit; and under no circumstance should a sentence be split between units!

If you need a linebreak in the middle of a section, the preferred way to achieve this without breaking units is to use <br /> at the end of the line where you want to break to occur (not on a new line). If you need space between the lines add <br /><br />.

Unbalanced brackets

The translation system marks any translated unit as incompletely translated if it contains any kind of unbalanced brackets. If you need to have unbalanced brackets in your text, please add a balancing bracket in a comment tag, like this:

<!-- }} -->{{ A line 

Another line}}<!-- {{ -->

This goes for all kinds of brackets, even ordinary parentheses. (Of course it is normally better to avoid blank lines within a mark up unit - see Keeping things together.)

Special Tags

Key presses and menu selections

  • <keycap> and </keycap> denote (keyboard) key names e.g. Enter
  • <keycap></keycap> can also be used around groups of keys to be used concurrently, e.g. Ctrl + Alt + F1 to launch a virtual terminal. (Note that "(space)+(space)" is used to link keys to be pressed concurrently).
  • Sequences of menu choices should use <menuchoice> and </menuchoice> for example View -> Message List -> Aggregation -> Standard Mailing List
  • In general, if the user needs to choose an element, even if it is not in a menu, the <menuchoice></menuchoiсe> markup should be used.
  • If you are contributing to a manual page, you should always use the markup describes above. For other pages, though, there is a template to enter menu selections: {{Menu|Top|sub|...}}. Fx, {{Menu | View | Message List | Aggregation | Standard Mailing List}} yields View Message List Aggregation Standard Mailing List
  • If you want to use the <menuchoice> but use → in stead of ->, you write & rarr; (without a space between '&' and r!) as in <menuchoice> View</menuchoice> & rarr; <menuchoice>Message List</menuchoice> which yields ViewMessage List. (Note, that the → character has to be outside of the menuchoice tags to be shown properly

Files and file paths

Traditionally, file names and paths have been marked up between <tt>...</tt> tags.

<tt>~/.kde/share</tt>

yields

~/.kde/share

There is now also a template for this, which should be preferred in new content for ordinary UserBase pages (but not for manual pages, please!):

{{Path | ~/.kde/share }}

yields

 ~/.kde/share 

The Problematic Pipe

In some situations the pipe symbol can't be used - for instance when adding parameters into a template. In any such case, please use {{!}} which will display as a pipe symbol. For example, if you want to display a command line containing the pipe character using the {{Input|...}} template, the simplest way to do it is this: {{Input|1=cmd1 {{!}} cmd2}} which displays

cmd1 | cmd2


If you just write {{Input|cmd1 | cmd2}} you get instead

cmd1 

the problem being, that cmd2 is seen as a second parameter to the template, which in this case is not used.

In many cases, you can also enclose the text containing the pipe character between <nowiki>... </nowiki> tags, like this {{Input|1=<nowiki>cmd1 | cmd2</nowiki>}}, which also displays

cmd1 | cmd2

Translatable Content

Everything that is translatable is contained within <translate> and </translate> tags. In most cases any images should be contained within the translatable section, as it is sometimes necessary to use localised versions of the images to explain a point. The rule of thumb is "If in doubt, include it!".