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