Scopes

Scope is an area which contains one or more source strings, making them unique from other scopes.

Example

Imagine we have a word "General". It may mean:

  • the "the entry of Settings menu"

  • or "player's military rank".

It may (and will) be localised differently in some languages.

Scope usage

To distinguish different localizations of the same word you can specify a scope:

<ul class="menu" data-bs-scope="Settings menu">
  <li class="__">General</li>
</ul>

and

<div class="player-info" data-bs-scope="Player info">
  Your rank: <span class="__">General</span>
</ul>

This will create two different scopes for "General" string, and allow it to be localised properly.

You and your team members (including proofreaders) will clearly see the scope in source strings list.

Scope size

You can set scope directly on a source string:

<span data-bs-scope="Player info">General</span>

or some container element:

<div class="page-section" data-bs-scope="Player info">

or even on a whole page:

<body data-bs-scope="Player info">

Nesting and default scope

Scopes do not stack. Each nested scope cancels the outer scope and creates its own scope.

You can reset any item to default ("none") scope by specifying an empty attribute. You may need it for strings which meaning is generic:

<div class="new-user-dialog" data-bs-scope="New user">
  ...
  <button class="__" data-bs-scope="">Cancel</button>
</div>

Recommendation

It is not recommended to create an own scope for each and every page. Average project has much more generic terms and strings.

But if you face a problem with an ambiguous localisation, you can add a scope at any time.

Last updated