TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-24 05:05:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

(ar)(pronouns) correctly connect arabic glyphs via zwj across morpheme boundaries

Browse Source 
probably introduced by the font change and some edge cases don’t render completely correctly, but it is totally better then before
https://stackoverflow.com/questions/11155849/partially-colored-arabic-word-in-html
This commit is contained in:
Valentyne Stigloher 2024-05-23 14:49:05 +02:00
parent f2b4424785
commit 07b2b4d75c
1 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/Example.vue
View File

@ -1,8 +1,14 @@
<template>
<span>
<span v-for="part in example.parts(pronoun, counter)">
<strong v-if="part.variable"><Morpheme :pronoun="pronoun" :morpheme="part.str" :counter="counter" /></strong>
<span v-else><Spelling :text="part.str" /></span>
<span v-for="(part, index) in exampleParts">
<strong v-if="part.variable"><Morpheme
:pronoun="pronoun"
:morpheme="part.str"
:counter="counter"
:prepend="getPrepend(index)"
:append="getAppend(index)"
/></strong>
<span v-else><Spelling :text="getPrepend(index) + part.str + getAppend(index)" /></span>
</span>
<small v-if="link">
(<nuxt-link :to="`/${pronoun.canonicalName}`"><Spelling escape :text="pronoun.canonicalName" /></nuxt-link>)
@ -17,6 +23,11 @@
<script lang="ts">
import Vue from 'vue';
import { Example, Pronoun } from '../src/classes.ts';
import type { ExamplePart } from '../src/classes.ts';
const startsWithArabicLetter = /^[\u0621-\u064A]/;
const endsWithArabicLetter = /[\u0621-\u064A]$/;
const zeroWidthJoiner = '\u200d';
export default Vue.extend({
props: {
@ -26,5 +37,32 @@ export default Vue.extend({
link: { type: Boolean },
pronunciation: { type: Boolean },
},
computed: {
exampleParts(): ExamplePart[] {
return this.example.parts(this.pronoun, this.counter);
},
},
methods: {
getContent(index: number): string | null {
if (this.exampleParts[index].variable) {
return this.pronoun.getMorpheme(this.exampleParts[index].str, this.counter);
}
return this.exampleParts[index].str;
},
getPrepend(index: number): string {
if (this.getContent(index)?.match(startsWithArabicLetter) &&
index > 0 && this.getContent(index - 1)?.match(endsWithArabicLetter)) {
return zeroWidthJoiner;
}
return '';
},
getAppend(index: number): string {
if (this.getContent(index)?.match(endsWithArabicLetter) &&
index < this.exampleParts.length - 1 && this.getContent(index + 1)?.match(startsWithArabicLetter)) {
return zeroWidthJoiner;
}
return '';
},
},
});
</script>