Discourse Schriftartendarstellung

[kcahtoor]

Hallo,

Ich stoße auf ein Problem mit der Schriftartendarstellung, wenn ich eine benutzerdefinierte Urdu-Schriftart, Jameel Noori Nastaliq (eine Variante von Noto Nastaliq Urdu), in Discourse verwende. Mein Setup ist:

• Browser: Chrome Version 138.0.7204.183

• Schriftart: Jameel Noori Nastaliq

• Plattform: Discourse (ich verwende eine Theme-Komponente nach dieser Anleitung)

Problem

Wenn ich Jameel Noori Nastaliq auf Discourse anwende, wird der Text nicht wie erwartet gerendert:

• Bestimmte Wörter werden falsch geformt. Im angehängten Bild zeigt der Text auf der rechten Seite, wie Discourse ihn derzeit rendert, während die linke Seite das erwartete Rendering zeigt (mit derselben Schriftart und demselben Browser).

• Andere Urdu-Schriftarten (nicht Nastaliq) werden in derselben Umgebung korrekt angezeigt.

• Zusätzlich wird Noto Nastaliq Urdu mit einer ungewöhnlich großen Schriftgröße im Vergleich zu anderen Schriftarten gerendert. Dies lässt den Text überdimensioniert und inkonsistent mit dem Rest der Benutzeroberfläche erscheinen.

Was ich versucht habe

• Testen mehrerer Nastaliq-Schriftarten: Alle Nastaliq-Schriftarten, d.h. Jameel, Mehr und Noto, haben dieses Problem.

• Vergleichen mit verschiedenen Browsern: (getestet auf Firefox/Edge)

• Überprüfen von CSS-Überschreibungen: Die Schriftart wird korrekt über @font-face angewendet und von Discourse geladen.

Erwartet vs. Tatsächlich

• Erwartet: Korrekte Nastaliq-Ligaturen und proportionale Größen (siehe linke Seite des Bildes).

• Tatsächlich: Fehlerhafte Wortbildung und überdimensionierter Text (siehe rechte Seite des Bildes).

Ist jemand anderem dieses Problem mit Noto Nastaliq Urdu auf Chrome + Discourse begegnet? Ist dies ein Chrome-Rendering-Fehler, ein Problem mit der Schriftart oder etwas in der Art, wie Discourse benutzerdefinierte Schriftarten behandelt?

Vielen Dank im Voraus für jegliche Hilfe.

[nat (Natalie T)]

Es besteht die Möglichkeit, dass Discourse etwas mit den Schriftarten in Bezug auf Schriftstärken macht.

Sind Sie mit CSS vertraut? Möglicherweise können Sie einige der Schriftstärkvariablen, die in Styling Discourse with variables: Show & Tell definiert sind, in einer Theme-Komponente anpassen.

[chapoi]

Ja, ich denke, es ist hauptsächlich die Fettschrift, die die Verzerrung verursacht.
Schalten Sie entweder alle fetten Schriftarten mit einer globalen Überschreibung aus oder stellen Sie sicher, dass die von Ihnen verwendete Schriftart eine spezielle fette Variante hat.

Ich habe gelesen, dass diese hier besser funktionieren könnte: Jameel Noori Nastaleeq Kasheeda: Download for free at Urdu Fonts : Urdu Fonts

[kcahtoor]

Vielen Dank für die Antwort. Ich werde die Fettschrift ausschalten. Wie schätzen Sie, wird es einfacher sein, dies zu tun?

[chapoi]

@kcahtoor

Ich werde fortfahren, fette Schriftarten zu deaktivieren. Wie schätzt du, wird es einfacher sein, das zu tun?

Hmm, um ganz gründlich zu sein, sollte das Hinzufügen zu deinem benutzerdefinierten CSS funktionieren:

* {
  font-weight: normal !important;
 }

[kcahtoor]

@chapoi

* {
  font-weight: normal !important;
 }

@chapoi Das funktioniert leider nicht. Was denkst du über

overflow-wrap: break-word;
white-space: nowrap;
text-overflow: ellipsis;

Diese drei sind bei diesen Wörtern üblich

[chapoi]

Keine davon wird etwas für Ihre Schriftart tun.

Ich habe meine Lösung lokal ausprobiert, und das schien den Trick zu tun. Sagen Sie, dass die CSS nicht angewendet wird, oder wird sie angewendet, löst aber das Problem nicht?

[kcahtoor]

@chapoi danke. Was ich sagen möchte, ist, dass die CSS-Regel angewendet wird, aber nicht die gewünschten Effekte erzielt. Hier sind die Links, damit Sie reproduzieren können, was ich erlebe

/* Jameel Noori Nastaliq v4 */
@font-face {
  font-family: "Jameel-Noori";
  src: url("https://cdn.jsdelivr.net/npm/jameel-noori/fonts/jameel-noori-nastaleeq4.woff2") format("woff2"),
  url("https://unpkg.com/jameel-noori/fonts/jameel-noori-nastaleeq4.woff2") format("woff2");
}

Diese spezielle Variante erzeugt diese Art von überlappenden Zeichen und ist meilenweit vom gewünschten Effekt entfernt, der dort unten ist.

/* Mehr Nastaliq Web Font v2 */
@font-face {
  font-family: "Mehr";
  src: url("https://cdn.jsdelivr.net/npm/mehr-nastaliq/fonts/mehr.woff2") format("woff2")
}

[kcahtoor]

Das Problem wird durch die standardmäßigen CSS-Schriftarteinstellungen von Discourse verursacht, die die Darstellung komplexer Skripte beeinträchtigen:

css

//Problematische Standardeinstellungen
font-variant-ligatures: none;
font-feature-settings: "calt" 0;

//Lösung ist das Überschreiben
 font-variant-ligatures: normal;
 font-feature-settings: normal;

Dies hat das Problem mit beiden Schriftarten gelöst.