Internationalization (i18n)

import { createTranslator } from 'kolibri/utils/i18n';

const strings = createTranslator('QuizResultsStrings', {
  pageTitle: {
    message: 'Quiz Results',
    context: 'Page heading for quiz results page',
  },
  score: {
    message: 'You scored {score} out of {total}',
    context: 'Shows the user\'s quiz score',
  },
  passed: {
    message: 'Congratulations! You passed.',
    context: 'Success message when user passes quiz',
  },
});

export default {
  name: 'QuizResults',
  setup() {
    // Destructure with $ suffix for use in templates
    const { pageTitle$, score$, passed$ } = strings;

    return {
      pageTitle$,
      score$,
      passed$,
    };
  },
};

<template>
  <div>
    <h1>{{ pageTitle$() }}</h1>
    <p>{{ score$({ score: 8, total: 10 }) }}</p>
    <p v-if="isPassed">{{ passed$() }}</p>
  </div>
</template>

{
  messageId: {
    message: 'The text to translate',
    context: 'When/where this appears and how it\'s used',
  },
}

{
  greeting: {
    message: 'Hello, {name}!',
    context: 'Personalized greeting',
  },
  itemsSelected: {
    message: 'You have selected {count} items',
    context: 'Number of selected items',
  },
}

// Usage:
greeting$({ name: 'Alice' })  // "Hello, Alice!"
itemsSelected$({ count: 5 })   // "You have selected 5 items"

{
  questionsLabel: {
    message: '{count, plural, one {# question} other {# questions}}',
    context: 'Number of questions in a quiz',
  },
  minutesRemaining: {
    message: '{minutes, plural, =0 {Less than a minute} one {# minute} other {# minutes}} remaining',
    context: 'Time remaining in quiz',
  },
}

// Usage:
questionsLabel$({ count: 1 })  // "1 question"
questionsLabel$({ count: 5 })  // "5 questions"
minutesRemaining$({ minutes: 0 })  // "Less than a minute remaining"

{
  roleDescription: {
    message: '{role, select, admin {Administrator} coach {Coach} learner {Learner} other {User}}',
    context: 'User role label',
  },
}

// Usage:
roleDescription$({ role: 'admin' })    // "Administrator"
roleDescription$({ role: 'learner' })  // "Learner"

{
  progress: {
    message: 'Progress: {percent, number, percent}',
    context: 'Progress percentage',
  },
  fileSize: {
    message: 'File size: {bytes, number} bytes',
    context: 'File size in bytes',
  },
}

// Usage:
progress$({ percent: 0.75 })  // "Progress: 75%"
fileSize$({ bytes: 1024 })     // "File size: 1,024 bytes"

import commonStrings from '../commonStrings';

export default {
  setup() {
    const { cancel$, save$ } = commonStrings;

    return {
      cancel$,
      save$,
    };
  },
};

from django.utils.translation import gettext as _
from django.utils.translation import ngettext
from django.utils.translation import pgettext

# Simple translation
message = _('User created successfully')

# Translation with context
message = pgettext('button label', 'Save')

# Plurals
message = ngettext(
    'One lesson',
    '{count} lessons',
    lesson_count
).format(count=lesson_count)

# Good - f-strings with _() around the whole string
message = _(f'Welcome, {user.name}!')

# Also good - format() with named placeholders
message = _('Welcome, {name}!').format(name=user.name)

/* Your CSS */
.element {
  padding-left: 16px;
  margin-right: 8px;
  text-align: left;
}

/* Auto-generated RTL CSS */
.element {
  padding-right: 16px;  /* Flipped */
  margin-left: 8px;     /* Flipped */
  text-align: right;    /* Flipped */
}

<!-- ❌ Wrong: Inline styles don't flip -->
<template>
  <div style="padding-left: 16px;">
    Content
  </div>
</template>

<!-- ✅ Correct: Style blocks auto-flip -->
<template>
  <div class="content">
    Content
  </div>
</template>

<style scoped>
.content {
  padding-left: 16px; /* Auto-flips to padding-right in RTL */
}
</style>

<template>
  <!-- Application text - auto-aligned -->
  <h1>{{ pageTitle$() }}</h1>

  <!-- User content - needs dir="auto" -->
  <div dir="auto">
    {{ userGeneratedText }}
  </div>

  <!-- Mixed inline text -->
  <p>
    {{ appLabel$() }}: <span dir="auto">{{ userName }}</span>
  </p>
</template>

export default {
  setup() {
    function scrollForward() {
      if (this.isRtl) {
        scrollLeft();
      } else {
        scrollRight();
      }
    }

    return { scrollForward };
  },
};

<template>
  <!-- Auto-flips in RTL for directional icons -->
  <KIcon icon="forward" />
  <KIcon icon="back" />

  <!-- Doesn't flip (not directional) -->
  <KIcon icon="add" />
  <KIcon icon="check" />
</template>

make i18n-upload

# Without auto-approval (recommended)
make i18n-pretranslate

# With auto-approval (use with caution)
make i18n-pretranslate-approve-all

# First time - download source fonts
make i18n-download-source-fonts

# Download translations (takes a long time!)
make i18n-download

{
  loading: {
    message: 'Loading...',
    context: 'Message shown while data is loading',
  },
}

{
  errorGeneric: {
    message: 'An error occurred. Please try again.',
    context: 'Generic error message',
  },
  errorNetwork: {
    message: 'Network error. Check your connection and try again.',
    context: 'Error when network request fails',
  },
}

{
  deleteConfirm: {
    message: 'Are you sure you want to delete {itemName}? This cannot be undone.',
    context: 'Confirmation before deleting an item',
  },
}

const formatter = new Intl.DateTimeFormat(window.navigator.language, {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});

const formattedDate = formatter.format(new Date());
// English: "March 4, 2026"
// Spanish: "4 de marzo de 2026"
// Arabic: "٤ مارس ٢٠٢٦"

# Set language via environment
export KOLIBRI_LANGUAGE=ar  # Arabic
export KOLIBRI_LANGUAGE=es  # Spanish
kolibri start