Can CSS be used to set line height for only certain Unicode ranges? (for mixed-language notes)

Custom CSS & Theme Design
1

What I’m trying to do

I’m trying to change the font and size of scripts/writing systems belonging to certain languages.

I take mixed-language notes using Latin script, Arabic and Cyrillic. While adjusting font for Cyrillic is a nice-to-have, adjusting font and SIZE for Arabic is a must, esp cuz I’m not seasoned when it comes to reading it. Since I am a relative beginner in Arabic, I am constantly switching between Latin and Arabic.

And now the issue is this: Although, I have managed to use the @font-face rule to set my desired Arabic font and font-size for a CSS class, it’s pretty useless because the text overlaps because I cannot figure out how to change line height!

Things I have tried

Currently running a CSS snippet with the @font-face rule. All the descriptors which are included here work just fine and my Arabic letters are the font and size I want them.

@font-face {
  font-family: "Scheherazade New Regular Arabic";
  size-adjust: 300%;
  src: url(data:font/ttf;base64, *[REST OF THE FONT FILE]*);
  unicode-range: U+0600-06FF;
}

The best solution I have currently found to the line height issue, which doesnt really feel like a solution is to add this as a snippet:

.arabic-lh {
  font-family: ""Scheherazade New Regular Arabic"";
  line-height: 3.8;
  direction: rtl;
  unicode-bidi: isolate;
  white-space: pre-wrap;
}

and then selecting the Arabic text and adding the corresponding HTML through a Templater hotkey to the selected text. It doesn’t solve my issue because this text is now an HTML block and cant be formatted (aka I can’t make quotes and callouts out of it!)

so I’m wondering:

  • any ideas as to how to solve this through CSS? by this, I mean changing the line height for only a specific Unicode range so it doesnt looke like im drafting an experimental novel when using latin script.
  • have I reached the limit as to what I can do without involving JavaScript?
  • how complicated would making a plugin to solve this issue be for a beginner (with some understanding)?
2

@font-face has an attribute ‘unicode-range’, but I’ve never used it. You may want to look into that.

Here’s a bit of info:

The syntax for unicode-range can include:

TYPE EXAMPLE DESCRIPTION
Single code point unicode-range: U+26; Targets a specific character (e.g., ampersand).
Code point range unicode-range: U+0-7F; Includes all characters from U+00 to U+7F.
Wildcard range unicode-range: U+4??; Matches characters in a specified range with wildcards.
Multiple values unicode-range: U+0025-00FF, U+4??; Combines different ranges.
3

It works perfectly for changing the font and the size for a specific script type :slight_smile: The line height? Not so much, unfortunately. Or at least I havent figured it out.

4

How about CSS that sets a height for all right-to-left lines:

[dir="rtl"] {
  line-height: 4;
}