Pecha.org String Grouping

Description of sefaria's string grouping

Where did string grouping is applied on ?

String grouping is mainly applied on webfont.

Why not on string size and other attributes like color ?

For string size and colors there is no need to apply grouping as these css can be directly applied on the string classname.

Webfont string grouping logic that sefaria applied in css:

The location of css file is in static/css/s2.css

In css, it checks whether the language is Tibetan or English as can be seen below
* {
--tibetan-font-conditional: var(--is-tibetan) var(--tibetan-font);
font-family: var(--tibetan-font-conditional), var(--english-font);
}
For Website language in Tibetan --tibetan-font-conditional variable is applied , and for website language in English, --english-font variable will be applied.
--tibetan-font-conditional has two conditions, they are var(--is-tibetan) and var(--tibetan-font)
In var(--is-tibetan) variable, there are all the list of classname that should be applied for tibetan strings
In var(--tibetan-font) variable, there are either var(--tibetan-serif-font-family) or var(--tibetan-sans-serif-font-family)
In var(--tibetan-serif-font-family) variable, right now we have pass "Monlam Uni OuChan2" webfont.
In var(--tibetan-sans-serif-font-family) variable, right now we have pass "Monlam-bodyig Regular" webfont.
For the website language in english, var(--english-font) is applied.
In var(--english-font) there are either --english-sans-serif-font-family: "Roboto"; or --english-serif-font-family: "IndUni-P-Regular";

when applying different color and size for tibetan and english, there shouldnt be any changes on the other language.

All the strings have classname either, int-en or int-he(for Tibetan) or int-zh(for Chinese). So when we change the language of the website to Tibetan, int-he classname get triggered and so does all the applied css on it.
So for example if we need to apply different font-size for font-color to

.headerInner .headerNavSection a {
    font-size: 16px;
    color: #666;
    margin-inline-end: 30px;
    font-weight: 500;
    line-height: 26px;
    vertical-align: middle;
}

which is css for

Then to change the font size for Tibetan only, we can create a new applied css with int-he so that only for Tibetan get these attribute applied

.headerInner .headerNavSection a .int-he{
    font-size: 25px;
    color: #666;
    margin-inline-end: 30px;
    font-weight: 500;
    line-height: 26px;
    vertical-align: middle;
}

Provide feedback

Saved searches