Not logged in. · Lost password · Register
Forum: Non-English Discussion German discussion RSS
Wörter mit einer anderen Schriftart formatieren
Tonzeichen in Pinyin sind nicht gut zu erkennen.
Page:  1  2  3  next 
Avatar
Annel #1
Member for 2 months · 54 posts · Location: Berlin / Fuyang
Group memberships: Members
Show profile · Link to this post
Subject: Wörter mit einer anderen Schriftart formatieren
Hallo,

die beiden Wörter " shāobǐng " und " shàobīng ", in Pīnyīn sehen auf den ersten Blick gleich aus.

Das sie völlig unterschiedliche Bedeutungen haben, sieht man nur, wenn man auch die Tonzeichen möglichst prompt erkennt. Einmal falsch gelernt, betont man das erste Wort falsch und bekommt beim Bäcker kein shāobǐng - Sesambrötchen, sondern Gelächter, weil man einen shàobīng - Wachsoldaten verlangt hat*.

Weil diese Tonzeichen, auch in einem deutsch/chinesischen Fließtext, nicht gut zu erkennen sind, ist flüssiges lesen kaum möglich

Deshalb frage ich, ob es ein Plugin gibt, mit dem sich einzelne Worte, durch markieren, in einer anderen Schriftart darstellen lassen.

Mit dem "Wrap Plugin" oder mit "Code Text" wird die Schrift nicht genug betont. Mit etwas CSS in der userstyle.css und Einbinden von HTML gestatten  habe ich eine crude Lösung gefunden (siehe Screenshot). Der Aufwand für voraussichtlich 70 Seiten und X Vokabellisten ist aber enorm und vor allem so richtig crude.

In der "style.less", des "Wrap Plugin", habe ich mich sofort verlaufen - das übersteigt dann doch meine CSS-Kenntnisse. Vom Anbinden an die Editor Toolbar ganz abgesehen.

Wenn mir jemand entweder beim Anpassen der style.less helfen, oder ein Plugin nennen kann, wäre ich gerettet.

Vielen Dank im Voraus
und Grüße
  Anne

* Selbst wenn man ein Wort falsch ausspricht, ergibt sich der Sinn meist aus dem Kontext. Zum Lernen ist es aber wichtig, die Tonzeichen spontan zu erkennen.
The author has attached one file to this post:
forum-pinyin.png 49.4 kBytes
You have no permission to open this file.
This post was edited 2 times, last on 2019-05-23, 12:05 by Annel.
Avatar
cziehr #2
Member since Jan 2011 · 579 posts · Location: 10119 Berlin
Group memberships: Members
Show profile · Link to this post
Hallo Anne,

man kann sich für das wrap-Plugin auch eigene Klassen „bauen“.

Du könntest dann auf Deiner Wiki-Seite zum Beispiel schreiben:

Dieses Wort soll <wrap vokabel>hervorgehoben</wrap> werden.

Alles was sich innerhalb des wraps befindet, könntest Du nach Belieben mit CSS umgestalten, also Schriftart, Schriftgröße, Farbe, etc.

Kann Dir wenn Du möchtest den Code heute Abend heraussuchen - es sind nur wenige Zeilen die Du dafür in die userstyle.css eintragen musst.

Viele Grüße,
Christoph
Avatar
Michaelsy #3
Member since Jun 2015 · 936 posts · Location: Düsseldorf, Germany
Group memberships: Members
Show profile · Link to this post
In reply to post #1
Hallo,

von mir ein etwas trickreicher Ansatz, mit dem man recht schnell und mit relativ wenig Know-How für eine recht komfortable Lösung sorgen kann.

Die Grundidee besteht darin, dass man grundsätzlich jedes HTML-Element und jede CSS-Klasse bzw. den dadurch eingefassten Text mit jeder beliebigen Formatierung versehen kann (und auch jede beliebige derzeit festgelegte Formatierung auch wieder zurücksetzen kann).

Diese Grundidee ermöglicht es, irgendeine Formatierungsvariante, die DokuWiki anbietet, gewissermaßen für den Zweck zu "missbrauchen", hier eine spezielle Schriftart-Formatierung vorzunehmen.

Voraussetzung ist natürlich, dass man auf diese Formatierung in der Standard-Funktion verzichten kann. Beispiel: Die Formatierung für  Monospace-Text , die vor allem für die Darstellung von Code-Schnipseln und von Bezeichnern bei der Software-Dokumentation verwendet wird. In anderen Textformen wird diese Formatierung fast nicht benötigt (meine ich jedenfalls).

Tatsächlich führt dieser Wikitext:
Dies ist eine ''besondere'' Formatierung...

einfach erst einmal nur zu diesem HTML-Output:
Dies ist eine <code>besondere</code> Formatierung...

Und wird über diese CSS-Regel formatiert:
pre, code, samp, kbd {
    background-color: #fbfaf9;
    border-radius: 2px;
    box-shadow: 0 0 0.3em #ccc inset;
    color: #333;
    direction: ltr;
    font-family: Consolas,"Andale Mono WT","Andale Mono","Bitstream Vera Sans Mono","Nimbus Mono L",Monaco,"Courier New",monospace;
    font-size: 1em;
    text-align: left;
}

Alle diese Eigenschaftszuweisungen lassen sich aber wie gesagt umdefinieren. Und z.B. durch spezielle "Nicht-Eigenschaft" wie etwa "inherit" quasi wieder löschen bzw. zurücksetzen.

HTH - Michael Sy.
By Patreon.com a few eurons can be fed into the code phasers of
the DokuWiki engine. Besides, Andi's posts are worth reading.
Avatar
Annel #4
Member for 2 months · 54 posts · Location: Berlin / Fuyang
Group memberships: Members
Show profile · Link to this post
In reply to post #2
Quote by cziehr:
Kann Dir wenn Du möchtest den Code heute Abend heraussuchen - es sind nur wenige Zeilen die Du dafür in die userstyle.css eintragen musst.

Das musst du nicht mehr tun, juchu.

Hallo Christoph,

vielen, herzlichen Dank für Deine prompte Hilfe.

Meine Güte, war das mal wieder einfach. Dein Codeschnipsel hat mich erleuchtet. Musste ja nur .wrap_py { vor meine 3 Zeilen setzen.}, mit denen ich das schon probiert hatte. Das ist eine ungemeine Erleichterung, auch wenn das Formatieren aus dem Editor heraus, besonders in den Vokabel-Tabellen, einfacher gewesen wäre.*wegduck

Nochmals vielen Dank und liebe Grüße

Anne

Oh  Michaelsy hat auch schon geschrieben.
Avatar
Michaelsy #5
Member since Jun 2015 · 936 posts · Location: Düsseldorf, Germany
Group memberships: Members
Show profile · Link to this post
So sähe die Umdefinition von <code> dann konkret aus:

code {
    background-color: transparent;
    box-shadow: none;
    color: inherit;
    direction: inherit;
    font-size: inherit;
    text-align: inherit;
    font-family: Hier_der_Spezial_Font;
}
By Patreon.com a few eurons can be fed into the code phasers of
the DokuWiki engine. Besides, Andi's posts are worth reading.
Avatar
Annel #6
Member for 2 months · 54 posts · Location: Berlin / Fuyang
Group memberships: Members
Show profile · Link to this post
Hallo Michael,

auch Dir herzlichen Dank. Das klappt prima, hab ich wieder etwas dazu gelernt. Einfacher geht es nun nicht mehr.

Viele Grüße
   Anne
Avatar
LarsDW223 #7
Member since Sep 2014 · 399 posts · Location: Paderborn
Group memberships: Members
Show profile · Link to this post
Wenn man den Stil für das code-Element nicht ändern möchte kann man z.B. auch das Typography-Plugin verwenden, siehe https://www.dokuwiki.org/plugin:typography.
Avatar
Annel #8
Member for 2 months · 54 posts · Location: Berlin / Fuyang
Group memberships: Members
Show profile · Link to this post
Hallo Lars,

vielen Dank für Deinen Vorschlag.

Nimm meinen Beitrag jetzt nicht als Kritik auf - Vielleicht hat der Eine oder Andere User genau solch eine Funktion gesucht.

Um innerhalb eines Artikels mal ein/zwei Worte besonders hervorzuheben, ist das Plugin ganz sicher gut geeignet.

Ich habe es eben getestet. Für mich ist es nicht praktikabel, denn ich habe deutschsprachige Sätze gemischt mit chinesischen Vokabeln. (Screen-Schuss)

Dank Michaels Hilfe, bedeutet es im Beispiel-Bild: zwei mal markieren und zwei Klicks, um die Vokabeln hervorzuheben. Beim Korrigieren fallen die Akzentuieren-Zeichen fast nicht auf. Mit dem Typography Plugin muss ein Wort für jede Eigenschaft erneut markiert werden. Das erzeugt schon beim Editieren eine unübersichtliche "Codemüllhalde".

"Jede Eigenschaft" heißt, dass ich auch den Font "Courier" benötige, weil der die Tonzeichen besonders gut abbildet. Das Typography Plugin bietet nicht wirklich Fonts an, sondern nur "Serif" und "Sans-seriv". "Courier" muss von Hand notiert werden.

Für Fonts, die dann auch per Mausklick eingefügt werden können, wird das FontFamily Plugin benötigt, das auf der Plugin-Seite verlinkt ist. "Courier" ist nicht dabei. Das muss dann doch wieder von Hand eingetippt werden und vom Einbinden von Webfont rate ich dringrnd ab.

Viele Grüße
  Anne
The author has attached one file to this post:
code-vs-typo.png 21.9 kBytes
You have no permission to open this file.
Avatar
LarsDW223 #9
Member since Sep 2014 · 399 posts · Location: Paderborn
Group memberships: Members
Show profile · Link to this post
Hallo Anne,

kein Problem. Es sollte auch nur der Vollständigkeit halber dienen. Evtl. wollen andere User den Stil des Code-Elements nicht ändern, da sie es bereits anderweitig anwenden.

Grüße,
Lars
Avatar
Michaelsy #10
Member since Jun 2015 · 936 posts · Location: Düsseldorf, Germany
Group memberships: Members
Show profile · Link to this post
In reply to post #6
Auch nur der Vollständigkeit halber: Die ''Code- bzw. Monospace-Formatierung'' kann man im DW-Editor auch über den Shortcut <Shift><Alt><M> eingeben.
By Patreon.com a few eurons can be fed into the code phasers of
the DokuWiki engine. Besides, Andi's posts are worth reading.
Avatar
cziehr #11
Member since Jan 2011 · 579 posts · Location: 10119 Berlin
Group memberships: Members
Show profile · Link to this post
In reply to post #9
Um meine Lösung auch noch endgültig vorzustellen, falls mal jemand Bedarf dran hat:

Es ist nötig zuerst das wrap-Plugin zu installieren.

Wenn man dann im Wiki-Text

Dieses Wort soll <wrap vokabel>hervorgehoben</wrap> werden.

schreibt, kann man den Inhalt des wraps frei definieren. Wenn man wie hier im Beispiel eine Definition für "wrap vokabel" haben möchte, schreibt man in die conf/userstyle.css:

.wrap_vokabel {
    font-family: arial;
}

Wenn man die großen WRAPs umstylen möchten, also komplette Blöcke statt im Fließtext, schreibt man im Wiki-Code

<WRAP vokabel>
Vokabel-Block
</WRAP>

und dann (weil es ein div-Element ist) in der conf/userstyle.css

div.wrap_vokabel {
    font-family: arial;
}

Der Vorteil gegenüber Michaels Lösung ist, dass man sich eine unbegrenzte Anzahl von eigenen Formatierungen anlegen kann - ich brauchte beispielsweise ca. 25 verschiedene individuell gestaltete WRAP-Boxen (in verschiedenen Farben und mit verschiedenen Feuerwehrauto-Icons ;-) ) und mehrere kleine Inline-Auszeichnungen mittels wrap.
Gegenüber dem fontstyle-Plugin hat man den Vorteil, dass man nicht nur die Schrift, sondern im Prinzip alles steuern kann, z.B. auch die Icons die sich in der Box befinden wie man sie vom wrap-plugin kennt.
Für mich macht die Kombination dieser Möglichkeiten die wrap-plugin-Lösung daher zur besten Umsetzung. Wenn für Anne eine einzige Inline-Formatierung ausreichend ist, dann ist Michaels Lösung natürlich auch super geeignet.
Mit einer modifizierten Version des wrap-plugins ließen sich die Buttons für den Editor wahrscheinlich auch relativ unproblematisch nachrüsten, aber das ist ja nun nicht nötig. Ich habe das mit meinen 25 verschiedenen Blöcken übrigens nicht in die Toolbar des Editors eingebaut, sondern im Hilfe-Bereich eine Seite angelegt auf der alle Boxen als Live-Beispiel zu sehen sind und direkt untendrunter findet sich der Code fürs Beispiel. Der Bearbeiter muss sich dann nur den Code kopieren und den Inhalt der Box anpassen. In der Toolbar wäre das wahrscheinlich auch viel zu unübersichtlich.

Nachtrag:
Ich habe mal einen Screenshot von der Beispiel-Seite angehängt. Anwendungsfall ist, dass es vorgefertigte Checklisten für Einsatzfahrzeuge gibt die jeweils bei bestimmten Einsätzen abgearbeitet werden müssen. Man scrollt auf der Wiki-Seite runter bis man den Block mit dem Feuerwehrauto findet das man besetzt und arbeitet dann die Liste ab die im Block aufgeführt ist.

Viele Grüße,
Christoph

PS: Sorry fürs Thema kapern, aber ich dachte mir wenn, dann stelle ich meine Lösung umfassend vor ;-)
The author has attached one file to this post:
wrap_feuerwehr.jpg 225.6 kBytes
You have no permission to open this file.
Avatar
Michaelsy #12
Member since Jun 2015 · 936 posts · Location: Düsseldorf, Germany
Group memberships: Members
Show profile · Link to this post
Alle drei hier vorgestellten Lösungsvarianten haben ihre spezifischen Stärken und Schwächen. Und natürlich, das Wrap-Plugin ist das universelle Schweizer Messer, mit dem man praktisch alles machen kann. Verwende auch ich fast "täglich".

Um bei dem Bild zu bleiben, handelt es sich dagegen bei meiner Lösung um einen Sparschäler, mit dem man allerdings deutlich besser Salatgurken schälen kann, der aber ansonsten zu kaum etwas anderem zu gebrauchen ist.

Nur ein Posting um seiner selbst willen...  :cool:  - Michael Sy.
By Patreon.com a few eurons can be fed into the code phasers of
the DokuWiki engine. Besides, Andi's posts are worth reading.
This post was edited on 2019-05-09, 16:34 by Michaelsy.
Avatar
Annel #13
Member for 2 months · 54 posts · Location: Berlin / Fuyang
Group memberships: Members
Show profile · Link to this post
Hallo Christoph und Michael,

entschuldigt mich, leider konnte ich Euch gestern nicht antworten.

@Christoph - Du hast das Thema nicht gekapert. Eine "Codeschnipsel-Seite" habe ich auch und mit einem "wrap-Schnipsel" die Vokabeln eingegeben. Solange man nicht korrigieren muss, geht das, aber wehe wenn. Von Seite 3 bis 9 habe ich dann bei Fehlern, aus dem DokuWiki in den HTML-Editor kopiert und mit Suchen/Ersetzen korrigiert. Geht gar nicht.

Das Wrap-Plugin ist wahrlich das Schweizer Messer, wie Michael ganz richtig schrieb. Ich würde es auch lieber verwenden, als die "Sparschäler-Lösung".

Quote by Michael:
[. . .}
Sparschäler ...
       ... der aber ansonsten zu kaum etwas anderem zu gebrauchen ist.

Ja, leider, wie ich gestern festgestellt habe.

Quote by Michael:
Voraussetzung ist natürlich, dass man auf diese Formatierung in der Standard-Funktion verzichten kann.

Ich dachte ich könnte das bedingungslos.
Ich habe schlicht nicht bedacht wie "Nicht-Vokabeln" in einem Fließtext aussehen.
Die Vokabeln musste ich auf font-size: 17px setzen, was nun zur Folge hat, dass ''Code'' dominiert, normaler Text fast unter geht.

Definiert wird die Toolbar in der action.php Das ist aber schon alles, was ich herausgefunden habe.

Das Array für Lo habe ich kopiert, drangehängt und angepasst.

                [ . . . ]
                 ),
/*119*/      array(
                      'type'   => 'format',
                      'title'  => $this->getLang('lo'),
                      'icon'   => '../../plugins/wrap/images/toolbar/lo.png',
                      'open'   => '<'.$syntaxSpan.' lo>',
                      'close'  => '</'.$syntaxSpan.'>',
                 ),
/*meins*/   array(
                      'type'   => 'format',
                      'title'  => $this->getLang('py'),
                      'icon'   => '../../plugins/wrap/images/toolbar/py.png',
                      'open'   => '<'.$syntaxSpan.' py>',
                      'close'  => '</'.$syntaxSpan.'>',
                ),
                [ . . . ]

Mein Icon liegt im richtigen Verzeichnis, hat auch die richtige Größe, DokuWiki- und Browser-Cache gelöscht - leider. Mein Icon erscheint nicht in der Toolbar. Fraglich ist ja auch, ob das überhaupt die Lösung wäre. In allen anderen Dateien habe ich keinen Hinweis auf die Toolbar oder Picker- Icons gefunden.

Mir ist klar, dass Eingriffe in Originaldateien immer eine schlechte Lösung sind und ohne Sicherung bei einem Update verloren gehen, aber wenn ich dennoch Tipps für einen Hack bekomme, wäre ich überglücklich.

Viele Grüße
  Anne
Avatar
Annel #14
Member for 2 months · 54 posts · Location: Berlin / Fuyang
Group memberships: Members
Show profile · Link to this post
Ich war vorhin wohl noch im Schlaf.

Mit meiner Wunschlösung wäre das Problem bei fehlerhaften Vokabeln nicht behoben. Den "Codemüll" müsste ich trotzdem nach ihnen durchsuchen - nur dass ich ihn mit einerm Klick erzeugen kann.

Dennoch interessiert es mich, wie eine "Picker-Lösung" aussehen könnte.

Viele Grüße
   Anne
Avatar
Michaelsy #15
Member since Jun 2015 · 936 posts · Location: Düsseldorf, Germany
Group memberships: Members
Show profile · Link to this post
In reply to post #13
Quote by Annel:
Die Vokabeln musste ich auf font-size: 17px setzen, was nun zur Folge hat, dass ''Code'' dominiert, normaler Text fast unter geht.

Vielleicht solltest du allgemein mit größerer Schrift arbeiten?
By Patreon.com a few eurons can be fed into the code phasers of
the DokuWiki engine. Besides, Andi's posts are worth reading.
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Page:  1  2  3  next 
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2019-06-24, 21:54:27 (UTC +02:00)