Skip to content

impove website UI #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: devel
Choose a base branch
from
+379 −397
Open

impove website UI #54

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions public/editor.css
View file
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@
}

.example-editor .ace_editor {
line-height: 1.2rem !important;
line-height: 1.2rem;
}

.example-editor .ace_editor .ace_cursor {
@@ -49,7 +49,7 @@
}

.example-editor .ace_editor .ace_string {
color: var(--code-string-color);
color: var(--code-string-color);
}

.example-editor .ace_editor .ace_number {
@@ -81,7 +81,7 @@
box-shadow: 0 0 3px 0px white;
}

.example-editor .ace_editor.ace_nobold .ace_line > span {
.example-editor .ace_editor.ace_nobold .ace_line>span {
font-weight: normal !important;
}

@@ -105,4 +105,4 @@

.example-editor .ace_editor .ace_error {
background: #ffa5a5 !important;
}
}
137 changes: 66 additions & 71 deletions public/fluent.css
View file
Original file line number Diff line number Diff line change
@@ -40,41 +40,34 @@ body {
font-weight: 300;
background-color: var(--main-bg-color);
color: var(--main-bg-text-color);
min-width: 370px;
line-height: 1.3rem;
display: grid;
grid-template-columns:
[full-start] minmax(0, 1fr)
[main-start] minmax(0, var(--site-width))
[main-end] minmax(0, 1fr)
[full-end];
grid-template-columns:
[full-start] minmax(1rem, 1fr) [main-start] minmax(0, var(--site-width)) [main-end] minmax(1rem, 1fr) [full-end];
}

body > div {
display: inherit;
grid-column: full;
grid-template-columns: inherit;
}

body > div > * {
body>:is(nav, header, main, section, footer) {
grid-column: main;
padding-left: 1rem;
padding-right: 1rem;
}

:is(header, main, section) h1 {
font-weight: 300;
font-size: 2rem;
line-height: 1.1;
}

/* Navigation Header */
/* Navigation Header */

#topbar {
display: flex;
justify-content: space-between;
}

#topbar > .logo {
line-height: var(--height-top-bar);
#topbar>.logo {
line-height: var(--height-top-bar);
}

#topbar > .logo > a {
#topbar>.logo>a {
display: inline-block;
color: var(--logo-color);
text-decoration: none;
@@ -83,24 +76,27 @@ body > div > * {
height: var(--height-top-bar);
}

#topbar > ul {
#topbar>ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.1rem 0.7rem;
justify-content: center;
}

#topbar > ul > li {
#topbar>ul>li {
display: inline-block;
line-height: var(--height-top-bar);
margin-left: 0.7rem;
line-height: var(--height-top-bar);
}

#topbar > ul > li > a {
#topbar>ul>li>a {
display: inline-block;
color: var(--main-accent-lighter-color);
text-decoration: none;
height: var(--height-top-bar);
}

#topbar > ul > li > a:hover {
#topbar>ul>li>a:hover {
color: var(--main-bg-text-active-color);
}

@@ -113,21 +109,20 @@ body > div > * {
padding-bottom: 3rem;
}

#intro > h1 {
#intro>h1 {
font-size: 4rem;
font-weight: 300;
margin: 3.5rem 0;
}

#intro > h2 {
#intro>h2 {
font-size: 2rem;
line-height: 2.2rem;
line-height: 1.2;
font-weight: 300;
margin: 3rem auto;
max-width: 80%;
}

#intro > a.cta {
#intro>a.cta {
color: var(--main-accent-darker-color);
text-decoration: none;
font-size: 1.3rem;
@@ -136,7 +131,7 @@ body > div > * {
border: 1px solid var(--main-accent-darker-color);
}

#intro > a.cta:hover {
#intro>a.cta:hover {
background-color: var(--main-accent-darker-color);
color: white;
}
@@ -145,31 +140,29 @@ body > div > * {

#above-the-fold {
display: flex;
padding-top: 2rem !important;
padding-bottom: 5rem !important;
padding-top: 2rem;
padding-bottom: 5rem;
}

#above-the-fold > ul {
#above-the-fold>ul {
flex: 1;
}

#above-the-fold > ul > li {
#above-the-fold>ul>li {
margin-top: 1rem;
margin-bottom: 2rem;
padding-right: 2rem;
}

#above-the-fold > ul > li > h1 {
font-weight: 300;
#above-the-fold>ul>li>h1 {
margin-bottom: 1rem;
font-size: 2rem;
}

#above-the-fold > ul > li > p > a {
#above-the-fold>ul>li>p>a {
color: var(--main-accent-color);
}

#above-the-fold > ul > li > p > a:hover {
#above-the-fold>ul>li>p>a:hover {
color: var(--main-accent-darker-color);
}

@@ -187,23 +180,21 @@ body > div > * {
line-height: 1.5rem;
}

#explainer > h1 {
font-size: 2rem;
font-weight: 300;
#explainer>h1 {
margin: 0.5rem 0;
}

#explainer > p {
#explainer>p {
padding: 0.5rem 0;
}

#explainer > p > a {
#explainer>p>a {
color: var(--main-accent-text-color);
text-decoration: none;
font-weight: 400;
}

#explainer > p > a:hover {
#explainer>p>a:hover {
text-decoration: underline;
}

@@ -224,8 +215,6 @@ body > div > * {
}

#examples h1 {
font-size: 2rem;
font-weight: 300;
margin: 4rem 0 2rem 0;
}

@@ -237,16 +226,16 @@ body > div > * {

#examples .example-vertical {
flex: 4;
border-top: 1px solid var(--main-accent-color);
/* border-top: 1px solid var(--main-accent-color); */
}

.example-vertical .variables {
border-top: 1px solid #ddd;
border-bottom: 1px solid var(--main-accent-color);
/* border-bottom: 1px solid var(--main-accent-color); */
display: grid;
grid-template-columns: 2fr 5fr;
grid-template-rows: auto;
grid-row-gap: 0.5rem;
gap: 0.5rem .3rem;
}

.example-vertical .results {
@@ -288,27 +277,27 @@ dl.variables {
padding: 1rem;
}

dl.variables > dt {
dl.variables>dt {
color: var(--code-variable-color);
}

dl.variables > dd {
dl.variables>dd {
display: flex;
}

dl.variables > dd > input {
dl.variables>dd>input {
width: 80%;
}

dl.variables > dd > input[type=range] {
dl.variables>dd>input[type=range] {
height: 1.3rem;
}

dl.variables > dd > label {
dl.variables>dd>label {
padding: 0 0.5rem;
}

dl.variables > dd.radio {
dl.variables>dd.radio {
display: grid;
grid-template-columns: 1fr 9fr;
grid-template-rows: auto;
@@ -322,11 +311,11 @@ dl.variables > dd.radio {
align-items: start;
}

.output > dt {
.output>dt {
color: var(--code-id-color);
}

.output > dd {
.output>dd {
color: var(--code-string-color);
}

@@ -339,7 +328,7 @@ dl.variables > dd.radio {
}

.annotation__name {
color: var(--code-error-color);
color: var(--code-error-color);
}

.annotation__body {
@@ -348,14 +337,14 @@ dl.variables > dd.radio {

.annotation__slice,
.annotation__label {
white-space: pre-wrap;
color: #999;
margin: 0;
white-space: pre-wrap;
color: #999;
margin: 0;
}

.annotation__name,
.annotation__label {
color: #d14;
color: #d14;
}


@@ -369,21 +358,27 @@ dl.variables > dd.radio {
main {
display: block;
}

#examples {
display: none;
}
}

@media (max-width: 30rem) {
#topbar {
justify-content: end;
padding-top: 1rem;
}
#topbar > .logo {

#topbar>.logo {
display: none;
}

#topbar > ul > li {
#topbar>ul>li {
margin-left: 0.2rem;
}
}

#above-the-fold {
flex-direction: column;
}

#examples {
display: none;
}
}
622 changes: 304 additions & 318 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,340 +1,326 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project Fluent</title>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-77033033-23"></script>
<script>
var doNotTrack =
navigator.doNotTrack === "1" // Modern browsers
|| navigator.doNotTrack === "yes" // Firefox < 32
|| window.doNotTrack === "1" // IE11
|| navigator.msDoNotTrack === "1"; // IE9, IE10
if (!doNotTrack) {
window.dataLayer = window.dataLayer || [];
function gtag() {dataLayer.push(arguments);}
gtag("js", new Date());
gtag("config", "UA-77033033-23", {
anonymize_ip: true,
});
}
</script>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="./favicon.ico">
<link rel="stylesheet" href="./fluent.css">
<link rel="stylesheet" href="./editor.css">
<link href="https://fonts.googleapis.com/css?family=Sarina" rel="stylesheet">

<script src="../src/index.js" defer></script>
</head>
<body>
<div>
<nav id="topbar">
<div class="logo">
<a href="/">fluent</a>
</div>
<ul>
<li>
<a href="/play">Playground</a>
<li>
<li>
<a href="/fluent/guide">Syntax Guide</a>
</li>
<li>
<a href="https://github.com/projectfluent/fluent/wiki">Documentation</a>
</li>
<li>
<a href="https://github.com/projectfluent">GitHub</a>
</li>
</ul>
</nav>

<head>
<meta charset="utf-8">
<title>Project Fluent</title>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-77033033-23"></script>
<script>
var doNotTrack =
navigator.doNotTrack === "1" // Modern browsers
|| navigator.doNotTrack === "yes" // Firefox < 32
|| window.doNotTrack === "1" // IE11
|| navigator.msDoNotTrack === "1"; // IE9, IE10
if (!doNotTrack) {
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag("js", new Date());
gtag("config", "UA-77033033-23", {
anonymize_ip: true,
});
}
</script>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="./favicon.ico">
<link rel="stylesheet" href="./fluent.css">
<link rel="stylesheet" href="./editor.css">
<link href="https://fonts.googleapis.com/css?family=Sarina" rel="stylesheet">

<script src="../src/index.js" defer></script>
</head>

<body>
<nav id="topbar">
<div class="logo">
<a href="/">fluent</a>
</div>
<div>
<header id="intro">
<ul>
<li>
<a href="/play">Playground</a>
</li>
<li>
<a href="/fluent/guide">Syntax Guide</a>
</li>
<li>
<a href="https://github.com/projectfluent/fluent/wiki">Documentation</a>
</li>
<li>
<a href="https://github.com/projectfluent">GitHub</a>
</li>
</ul>
</nav>
<header id="intro">
<h1>
Fluent
</h1>
<h2>A localization system<br>for&nbsp;natural-sounding translations.</h2>
<a href="https://github.com/projectfluent/fluent/wiki/" class="cta">Learn more</a>
</header>
<main id="above-the-fold">
<ul>
<li>
<h1>
Fluent
Asymmetric Localization
</h1>
<h2>A localization system<br>for&nbsp;natural-sounding translations.</h2>
<a href="https://github.com/projectfluent/fluent/wiki/" class="cta">Learn more</a>
</header>
</div>
<div>
<main id="above-the-fold">
<ul>
<li>
<h1>
Asymmetric Localization
</h1>
<p>

Natural-sounding translations with genders and grammatical
cases only when necessary. Expressiveness is not limited by the
grammar of the source language.

</p>
</li>
<li>
<h1>
Progressive Enhancement
</h1>
<p>

Translations are isolated; locale-specific logic doesn't leak
to other locales. Authors can iteratively improve translations
without impact on other languages.

</p>
</li>
<li>
<h1>
Fully-Featured
</h1>
<p>

Date, time, and number formatting. Plural categories.
Bidirectionality support. Custom formatters. Easy-to-read
syntax. Runtime translation and re-translation. Robust error
handling.

</p>
</li>
<li>
<h1>
Open Source
</h1>
<p>

Fluent Syntax 1.0 was <a
href="https://hacks.mozilla.org/2019/04/fluent-1-0-a-localization-system-for-natural-sounding-translations/">released
in April 2019</a>.

Client- and server-side implementations in <a
href="https://github.com/projectfluent/fluent.js">JS</a>, <a
href="https://github.com/projectfluent/python-fluent">Python</a>,
and <a
href="https://github.com/projectfluent/fluent-rs">Rust</a>. <a
href="https://github.com/projectfluent/fluent.js/tree/master/fluent-react">React</a>
bindings.
Licensed under the <a
href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0
License</a>.

</p>
</li>
</ul>
<aside id="demo-app" class="example-vertical"></aside>
</main>
</div>
<div>
<section id="explainer">
<h1>Why did we create Fluent?</h1>
<p>

Software localization has been dominated by an outdated paradigm:
translations that map one-to-one to the English copy. The
grammar of the source language imposes limits on the expressiveness
of the translation.
Natural-sounding translations with genders and grammatical
cases only when necessary. Expressiveness is not limited by the
grammar of the source language.

</p>
</li>
<li>
<h1>
Progressive Enhancement
</h1>
<p>

We created Fluent to change this paradigm. Translators should be
able to use the entire expressive power of their language without
asking developers for permission. In Fluent, translations are
asymmetric. A simple string in English can map to a complex
multi-variant translation in another language.
Translations are isolated; locale-specific logic doesn't leak
to other locales. Authors can iteratively improve translations
without impact on other languages.

</p>
</li>
<li>
<h1>
Fully-Featured
</h1>
<p>

Fluent makes it possible to cater to the grammar and style of many
languages, independently of the source language. It happens in
isolation; the fact that one language benefits from more advanced
logic doesn’t require any other localization to apply it. Each
localization is in control of how complex the translation
becomes.
Date, time, and number formatting. Plural categories.
Bidirectionality support. Custom formatters. Easy-to-read
syntax. Runtime translation and re-translation. Robust error
handling.

</p>
</section>
</div>
<div>
<section id="examples">
<h1>Interactive Walkthrough</h1>
<article>
<div id="example1-app" class="example-vertical"></div>
<div class="example-description">
<h2>The English Translation</h2>

<p>

In Fluent, most messages are simple text strings identified by
an <em>identifier</em>. In the first message in the example,
<code>tabs-close-button</code> is the identifier and
<code>Close</code> is the value.

</p>
<p>

Sometimes, translations require a little bit of logic to sound
right in the target language. In the
<code>tabs-close-tooltip</code> message, the correct variant of
the translation depends on the value of the
<code>$tabCount</code> variable. The names of the variants,
<code>[one]</code> and <code>[other]</code>, are standard names
of the plural categories defined by the Unicode in <a
href="http://cldr.unicode.org/index/cldr-spec/plural-rules">CLDR</a>.


</p>
<p>

On the other hand, when no logic is required, translations in
Fluent stay simple. The <code>tabs-close-warning</code> message
appears in Firefox when the user tries to close a window with
more than one tab. The message is only displayed when the tab
count is 2 or more, and so in English, the word <em>tab</em>
will always appear as the plural <em>tabs</em>.

</p>
<p>

<code>-sync-brand-name</code> is a special kind of message in
Fluent, called a <em>term</em>. Term identifiers always start
with a dash. Terms can be referenced by other messages, but
cannot be displayed directly in the app. Referencing terms is a
powerful tool for ensuring consistency. Once defined, a
translation can be reused in other translations.

</p>
<p>

The <code>-sync-brand-name</code> term can be referenced from
other messages, and it will always resolve to the same value.
Terms help enforce style guidelines; they can also be swapped
in and out to modify the branding in unofficial builds and on
beta release channels.

</p>
</div>
</article>

<article>
<div id="example2-app" class="example-vertical"></div>
<div class="example-description">
<h2>The Italian Translation</h2>
<p>

In Italian, the messages from the <code>tabs-close</code>
family have a similar structure to their English counterparts.
Even if the languages are different, the grammar requirements
for these particular messages are similar. Fluent doesn't
impose any additional complexity when it's not necessary.

</p>
<p>

The capitalization rules, however, are different in Italian
than in English. Thanks to the asymmetric nature of Fluent, the
Italian translation is free to define two facets of the brand
name. The default one, <code>[uppercase]</code>, is suitable
for standalone appearances (<code>sync-dialog-title</code>)
and for beginning of sentences
(<code>sync-headline-title</code>).

</p>
<p>

At the same time, the <code>[lowercase]</code> variant can be
explicitly requested by passing the <code>first:
"lowercase"</code> parameter when the brand name is used inside
a larger sentence in the <code>sync-signedout-title</code>
message.

</p>
</div>
</article>

<article>
<div id="example3-app" class="example-vertical"></div>
<div class="example-description">
<h2>The Polish Translation</h2>

<p>

The Polish translation illustrates how Fluent caters to yet
more complex grammars.

</p>
<p>

The imperative <em>Close</em> command in
<code>tabs-close-button</code>, <em>Zamknij</em>, still remains
a simple string, same as in English and in Italian. The other
messages in the <code>tabs-close</code> group, however, require
a bit more attention to sound well in Polish. It's related to
the fact that Polish, a Slavic language, has more plural
categories than English (a Germanic language) or Italian (a
Romance language). For example, the Polish translation for
<em>tab</em> takes a different form for counts of 2, 3, and 4
than it does for 5, 6, or 7. Hence, the
<code>tabs-close-warning</code> message requires additional
variants in Polish: <code>[few]</code> and <code>[many]</code>.

</p>
<p>

Similar to how Italian needed to vary the forms of
<code>-sync-brand-name</code> with regards to the
capitalization, the Polish translation defines three variants
of the brand name corresponding to three grammatical cases:
<em>nominative</em>, <em>genitive</em>, and
<em>accusative</em>.

</p>
<p>

Using terms inside sentences requires care in Polish, which is
an inflected language. The Polish translation can reference the
specific term variant corresponding to the <em>genitive</em>
declension to construct a grammatically correct sentence in the
<code>sync-signedout-title</code> message.

</p>
</div>
</article>
</section>
</div>
<div>
<footer>
</li>
<li>
<h1>
Open Source
</h1>
<p>

Fluent is a research project by <a
href="https://mozilla.org">Mozilla</a>.
Content available under the <a rel="license"
href="https://mozilla.org/en-US/foundation/licensing/">
Creative Commons BY-SA 3.0</a> license.
Fluent Syntax 1.0 was <a
href="https://hacks.mozilla.org/2019/04/fluent-1-0-a-localization-system-for-natural-sounding-translations/">released
in April 2019</a>.

Client- and server-side implementations in <a href="https://github.com/projectfluent/fluent.js">JS</a>, <a
href="https://github.com/projectfluent/python-fluent">Python</a>,
and <a href="https://github.com/projectfluent/fluent-rs">Rust</a>. <a
href="https://github.com/projectfluent/fluent.js/tree/master/fluent-react">React</a>
bindings.
Licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0
License</a>.

</p>
</li>
</ul>
<aside id="demo-app" class="example-vertical"></aside>
</main>
<section id="explainer">
<h1>Why did we create Fluent?</h1>
<p>

Software localization has been dominated by an outdated paradigm:
translations that map one-to-one to the English copy. The
grammar of the source language imposes limits on the expressiveness
of the translation.

</p>
<p>

We created Fluent to change this paradigm. Translators should be
able to use the entire expressive power of their language without
asking developers for permission. In Fluent, translations are
asymmetric. A simple string in English can map to a complex
multi-variant translation in another language.

</p>
<p>

Fluent makes it possible to cater to the grammar and style of many
languages, independently of the source language. It happens in
isolation; the fact that one language benefits from more advanced
logic doesn’t require any other localization to apply it. Each
localization is in control of how complex the translation
becomes.

</p>
</section>
<section id="examples">
<h1>Interactive Walkthrough</h1>
<article>
<div id="example1-app" class="example-vertical"></div>
<div class="example-description">
<h2>The English Translation</h2>

<ul>
<li>
<a href="https://www.mozilla.org/en-US/privacy/">Privacy</a>
</li>
<li>
<a href="https://www.mozilla.org/en-US/privacy/websites/">Website Privacy Notice</a>
</li>
<li>
<a href="https://www.mozilla.org/en-US/privacy/websites/#cookies">Cookies</a>
</li>
<li>
<a href="https://www.mozilla.org/en-US/about/legal/">Legal</a>
</li>
</ul>

</footer>
</div>
</body>
</html>
<p>

In Fluent, most messages are simple text strings identified by
an <em>identifier</em>. In the first message in the example,
<code>tabs-close-button</code> is the identifier and
<code>Close</code> is the value.

</p>
<p>

Sometimes, translations require a little bit of logic to sound
right in the target language. In the
<code>tabs-close-tooltip</code> message, the correct variant of
the translation depends on the value of the
<code>$tabCount</code> variable. The names of the variants,
<code>[one]</code> and <code>[other]</code>, are standard names
of the plural categories defined by the Unicode in <a
href="http://cldr.unicode.org/index/cldr-spec/plural-rules">CLDR</a>.


</p>
<p>

On the other hand, when no logic is required, translations in
Fluent stay simple. The <code>tabs-close-warning</code> message
appears in Firefox when the user tries to close a window with
more than one tab. The message is only displayed when the tab
count is 2 or more, and so in English, the word <em>tab</em>
will always appear as the plural <em>tabs</em>.

</p>
<p>

<code>-sync-brand-name</code> is a special kind of message in
Fluent, called a <em>term</em>. Term identifiers always start
with a dash. Terms can be referenced by other messages, but
cannot be displayed directly in the app. Referencing terms is a
powerful tool for ensuring consistency. Once defined, a
translation can be reused in other translations.

</p>
<p>

The <code>-sync-brand-name</code> term can be referenced from
other messages, and it will always resolve to the same value.
Terms help enforce style guidelines; they can also be swapped
in and out to modify the branding in unofficial builds and on
beta release channels.

</p>
</div>
</article>

<article>
<div id="example2-app" class="example-vertical"></div>
<div class="example-description">
<h2>The Italian Translation</h2>
<p>

In Italian, the messages from the <code>tabs-close</code>
family have a similar structure to their English counterparts.
Even if the languages are different, the grammar requirements
for these particular messages are similar. Fluent doesn't
impose any additional complexity when it's not necessary.

</p>
<p>

The capitalization rules, however, are different in Italian
than in English. Thanks to the asymmetric nature of Fluent, the
Italian translation is free to define two facets of the brand
name. The default one, <code>[uppercase]</code>, is suitable
for standalone appearances (<code>sync-dialog-title</code>)
and for beginning of sentences
(<code>sync-headline-title</code>).

</p>
<p>

At the same time, the <code>[lowercase]</code> variant can be
explicitly requested by passing the <code>first:
"lowercase"</code> parameter when the brand name is used inside
a larger sentence in the <code>sync-signedout-title</code>
message.

</p>
</div>
</article>

<article>
<div id="example3-app" class="example-vertical"></div>
<div class="example-description">
<h2>The Polish Translation</h2>

<p>

The Polish translation illustrates how Fluent caters to yet
more complex grammars.

</p>
<p>

The imperative <em>Close</em> command in
<code>tabs-close-button</code>, <em>Zamknij</em>, still remains
a simple string, same as in English and in Italian. The other
messages in the <code>tabs-close</code> group, however, require
a bit more attention to sound well in Polish. It's related to
the fact that Polish, a Slavic language, has more plural
categories than English (a Germanic language) or Italian (a
Romance language). For example, the Polish translation for
<em>tab</em> takes a different form for counts of 2, 3, and 4
than it does for 5, 6, or 7. Hence, the
<code>tabs-close-warning</code> message requires additional
variants in Polish: <code>[few]</code> and <code>[many]</code>.

</p>
<p>

Similar to how Italian needed to vary the forms of
<code>-sync-brand-name</code> with regards to the
capitalization, the Polish translation defines three variants
of the brand name corresponding to three grammatical cases:
<em>nominative</em>, <em>genitive</em>, and
<em>accusative</em>.

</p>
<p>

Using terms inside sentences requires care in Polish, which is
an inflected language. The Polish translation can reference the
specific term variant corresponding to the <em>genitive</em>
declension to construct a grammatically correct sentence in the
<code>sync-signedout-title</code> message.

</p>
</div>
</article>
</section>
<footer>
<p>

Fluent is a research project by <a href="https://mozilla.org">Mozilla</a>.
Content available under the <a rel="license" href="https://mozilla.org/en-US/foundation/licensing/">
Creative Commons BY-SA 3.0</a> license.

</p>

<ul>
<li>
<a href="https://www.mozilla.org/en-US/privacy/">Privacy</a>
</li>
<li>
<a href="https://www.mozilla.org/en-US/privacy/websites/">Website Privacy Notice</a>
</li>
<li>
<a href="https://www.mozilla.org/en-US/privacy/websites/#cookies">Cookies</a>
</li>
<li>
<a href="https://www.mozilla.org/en-US/about/legal/">Legal</a>
</li>
</ul>

</footer>
</body>

</html>
9 changes: 5 additions & 4 deletions src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// vim: ts=4 et sts=4 sw=4

import React, {Fragment} from 'react';
import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import ftl from "@fluent/dedent";

@@ -42,8 +42,8 @@ function Example0() {
}

ReactDOM.render(
<Example0 />,
document.getElementById('demo-app')
<Example0 />,
document.getElementById('demo-app')
);

const example1 = {
@@ -59,7 +59,8 @@ const example1 = {
tabs-close-warning =
You are about to close {$tabCount ->
[one] {$tabCount} tab
*[other] {$tabCount} tabs}.
*[other] {$tabCount} tabs
}.
Are you sure you want to continue?
## Syncing