How to make Tibetan ligatures a larger font size? #1933

New Issue

OVERLORD · 2026-02-05T02:15:06+03:00

OVERLORD commented

2026-02-05 02:15:06 +03:00

Originally created by @moksamedia on GitHub (Nov 10, 2020).

Hello,

I'm looking at bookstack for a Tibetan language learning project. One of the features I need to be able to implement is increasing the font size of the Tibetan ligatures in mixed Tibetan/English text blocks. (they are often too small compared to the same font size english text). I am a developer. I'm imagining some filter that scans the document and wraps all groups of Tibetan unicode with spans formatted the way I want. Is this possible in bookstack? What is the best way to go about it?

Another option I'd thought about was using code blocks to mark Tibetan and overriding the styling for code.

Thanks for your time.

Andrew

Originally created by @moksamedia on GitHub (Nov 10, 2020). Hello, I'm looking at bookstack for a Tibetan language learning project. One of the features I need to be able to implement is increasing the font size of the Tibetan ligatures in mixed Tibetan/English text blocks. (they are often too small compared to the same font size english text). I am a developer. I'm imagining some filter that scans the document and wraps all groups of Tibetan unicode with spans formatted the way I want. Is this possible in bookstack? What is the best way to go about it? Another option I'd thought about was using code blocks to mark Tibetan and overriding the styling for code. Thanks for your time. Andrew

OVERLORD closed this issue

2026-02-05 02:15:09 +03:00

OVERLORD commented

2026-02-05 02:15:15 +03:00

@ssddanbrown commented on GitHub (Dec 10, 2020):

Hi @moksamedia,
Sorry for my late reply. Interesting requirement you have there.

Had a think, If you don't mind this being done with JavaScript, and you only need this to be active on page viewing (Not edit), You can do this quite quickly with the following:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const mainContentBlocks = document.querySelectorAll('.page-content > div > *');
        for (const contentBlock of mainContentBlocks) {
            contentBlock.innerHTML = contentBlock.innerHTML.replace(/([\u0f00-\u0fff]+)/g, '<span class="tib">$1</span>');
        }
    });
</script>

<style>
    .tib {
        font-size: 1.3em;
        font-weight: bold;
        color: cornflowerblue;
    }
</style>

There's a "Custom Head HTML Content" part of the settings you could add the above to.

Styles are just an example to make changes obvious. The JavaScript, on page load, fetches all main blocks of the page content and then does a rough replacement of the code on each, searching for groups of characters within the tibetan range and wrapping them in span tags with a certain class.

It's fairly sketchy, might need some tuning to not mess with other blocks like code blocks (If used). Could also check for characters within the range and only do a replacement if they exist; but is a quick way to achieve some sort of desired functionality.

@ssddanbrown commented on GitHub (Dec 10, 2020): Hi @moksamedia, Sorry for my late reply. Interesting requirement you have there. Had a think, If you don't mind this being done with JavaScript, and you only need this to be active on page viewing (Not edit), You can do this quite quickly with the following: ```html <script> document.addEventListener('DOMContentLoaded', function() { const mainContentBlocks = document.querySelectorAll('.page-content > div > *'); for (const contentBlock of mainContentBlocks) { contentBlock.innerHTML = contentBlock.innerHTML.replace(/([\u0f00-\u0fff]+)/g, '<span class="tib">$1</span>'); } }); </script> <style> .tib { font-size: 1.3em; font-weight: bold; color: cornflowerblue; } </style> ``` There's a "Custom Head HTML Content" part of the settings you could add the above to. Styles are just an example to make changes obvious. The JavaScript, on page load, fetches all main blocks of the page content and then does a rough replacement of the code on each, searching for groups of characters within the tibetan range and wrapping them in span tags with a certain class. It's fairly sketchy, might need some tuning to not mess with other blocks like code blocks (If used). Could also check for characters within the range and only do a replacement if they exist; but is a quick way to achieve some sort of desired functionality.

OVERLORD commented

2026-02-05 02:15:21 +03:00

@moksamedia commented on GitHub (Dec 14, 2020):

Oh, cool. Thanks for following up.

@moksamedia commented on GitHub (Dec 14, 2020): Oh, cool. Thanks for following up.

OVERLORD commented

2026-02-05 02:15:26 +03:00

@ssddanbrown commented on GitHub (Dec 16, 2020):

@moksamedia No worries! I'll therefore close this off, since I can't see there being much chance of others providing further insight since this has been open for a month already.

@ssddanbrown commented on GitHub (Dec 16, 2020): @moksamedia No worries! I'll therefore close this off, since I can't see there being much chance of others providing further insight since this has been open for a month already.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#1933