Ich glaube, ich hatte die gleiche wooahhhhh coool Reaktion wie so viele andere, als dieser Tweet herumging
Die Kunst der Satzlänge. Schmelz dahin pic.twitter.com/K91GEZTnKm
— Lucy Foulkes (@lfoulkesy) 30. März 2016
Sicherlich ist gutes Schreiben mehr als nur abwechslungsreiche Satzlänge, aber dies ist eine fantastische Visualisierung, die einen hervorragenden Punkt macht. Es würde nicht schaden, wenn man so etwas in unserem eigenen Schreiben sehen könnte, nach Bedarf während der Bearbeitung.
Nachdem ich getwittert hatte, dass ich mir nicht ganz sicher war, wie ich das am besten machen sollte, meldeten sich viele Leute mit ihren Ideen, wie sie es tun würden.
Dave hat es in einem einzigen Tweet versucht. Seine Idee ist im Grunde
- Schleife durch alle Absätze.
- Erstelle ein Array von Sätzen, indem der gesamte String an Punkten geteilt wird.
- Umhülle jeden Satz mit einem Span mit einem Datenattribut, das die Anzahl der Wörter in diesem Satz angibt.
Die Datenattribute könnten dann in CSS-Selektoren zur Farbgebung verwendet werden. Die Idee funktionierte so, wie sie geschrieben war, nicht ganz, aber ich konnte diese Idee zu einem funktionierenden Konzept extrapolieren, wenn auch etwas wortreicher.
Siehe den Pen Satz-Farbgeber von Chris Coyier (@chriscoyier) auf CodePen.
Beachten Sie, dass diese Demo
- Fast keine Randfälle berücksichtigt. Beachten Sie dort den Fehler mit dem Bindestrichwort. Dinge wie „Frau Robinson“ wären ein offensichtlicher Randfall, mit dem diese hier nicht umgeht.
- Nicht besonders effizient ist.
Bevor wir hier zu weit gehen, wurde mir mehrfach darauf hingewiesen, dass die in diesem Tweet gezeigte Benutzeroberfläche der Hemingway App sehr ähnlich sieht.
In der Tat tut sie das. Ich frage mich, ob es eine Art versteckte Funktion ist oder so? Ich konnte keine Satzlängen-Farbgebungsfunktion finden, als ich dort ein wenig herumgestöbert habe. Sie hebt jedoch andere Dinge auf nützliche Weise hervor.
Und wo wir gerade beim Hervorheben von Sätzen für nützliche Zwecke sind, Tone Analyzer ist ein Experiment, das genau das tut.
Es gibt auch eine Angular JS-Bibliothek, die verwendet werden kann, um beliebige Textlängen einzufärben.
Pim Derks hat ein echtes Lesezeichen erstellt, um das zu tun! Sehr cool.
Ich poste es hier zur Nachwelt
javascript:(function()%7Bvar%20colors%20%3D%20%5B'%23faf5cb'%2C%20'%23fcd2fa'%2C%20'%23c7f4c9'%2C%20'%23a7f3f1'%5D%3B%5B%5D.slice.apply(document.querySelectorAll('p%2C%20dt%2C%20dd%2Cli')).forEach(function(n)%7Bvar%20s%20%3D%20n.innerHTML.split('.%20')%3Bs.forEach(function(s)%7Bvar%20words%20%3D%20s.split('%20')%2Clength%20%3D%20words.length%3B%7D)%3Bvar%20r%20%3D%20''%3Bs.map(function(s)%7Bvar%20l%20%3D%20s.split(%22%20%22).length%2C%20c%3Bswitch(l)%7Bcase%201%3Acase%202%3Ac%20%3D%20colors%5B0%5D%3Bbreak%3Bcase%203%3Acase%204%3Acase%205%3Acase%206%3Ac%20%3D%20colors%5B1%5D%3Bbreak%3Bcase%207%3Acase%208%3Acase%209%3Acase%2010%3Acase%2011%3Acase%2012%3Ac%20%3D%20colors%5B2%5D%3Bbreak%3Bdefault%3Ac%20%3D%20colors%5B3%5D%3Bbreak%3B%7Dr%20%2B%3D%20'%3Cspan%20style%3D%22background-color%3A'%20%2B%20c%20%2B%20'%22%3E'%20%2B%20s%20%2B%20'.%20%3C%2Fspan%3E'%3B%7D)%3Bn.innerHTML%20%3D%20r%3B%7D)%7D)()Ich konnte es zum Laufen bringen
Ich habe es auch aus der URL-Kodierung entfernt und hier in einer Gabelung meines Pens abgelegt, damit Sie sich den Code leichter ansehen können (hat einige kleinere Fehler wie doppelte Punkte am Ende).
Siehe den Pen Satz-Farbgeber von Chris Coyier (@chriscoyier) auf CodePen.
Brandon Brule hat es versucht
Siehe den Pen Satzlänge hervorheben von Brandon Brule (@brandonbrule) auf CodePen.
Ich mag es, entweder Styling oder bereichsspezifische Klassen in JavaScript anzuwenden. Der Ansatz mit `[data-wc]` war schwierig, weil man sehr explizit sein muss. Man kann nicht wirklich `[data-wc>10]` machen.
Antoinette Janus hat ebenfalls eine gut gemachte Version
Siehe den Pen Text-Hervorheber von Antoinette Janus (@acjdesigns) auf CodePen.
Jonathan Williamson hat eine Demo mit einem Textfeld erstellt, und die Farbgebung ist separat und wird beim Tippen aktualisiert.
Siehe den Pen Gary Provost von Jonathan Williamson (@jon-w1) auf CodePen.
Der ursprüngliche Tweet handelte von der Schönheit der abwechslungsreichen Satzlänge. Schönheit darin, wie sich das Schreiben anfühlt und liest. Es ging eigentlich nicht um die Farben oder deren Visualisierung, das diente nur dazu, die Botschaft zu erklären. Aber die Farben waren auch irgendwie schön.
In einer weiteren Vorab-Arbeit hier hat Sanne Peters einige visualisierte Gedichte erstellt, die Wörter Farben zuordnen, damit Sie sie sehen und lesen können.
Denken Sie auch daran, dass wir keine Fremden für Lesezeichen sind, die beim Text helfen. Vor ein paar Jahren haben wir uns mit einem befasst, das half zu zeigen, wo eine ideale Zeilenlänge für Lesbarkeit liegen sollte.
Siehe den Pen Lesezeichen zum Einfärben von Text zwischen 45 und 75 Zeichen rot. von Chris Coyier (@chriscoyier) auf CodePen.
Und das ist es, was ein aktiver Tweet-Thread bringen kann!
Ich habe einen Codepen geschrieben, der Wortabschnitte greift, um eine Art Textkodierungs-/Dekodierungseffekt zu erzeugen: http://codepen.io/Scientifik/pen/NAyjpa Ich bin mir sicher, es wäre nicht so schwer, jeder Sektion eine Hervorhebungs-Farbklasse hinzuzufügen.
Vor einiger Zeit habe ich etwas Ähnliches für eine Entwicklerherausforderung bei der Arbeit gemacht: Gib einer bestimmten Anzahl von Wörtern die gleiche Farbe basierend auf der gesamten Satzlänge, gehe in diesen Farben hin und her (also Farbe 1, 2, 3, 2, 1, 2) und beginne mit Farbe 1 am Anfang eines Satzes. http://codepen.io/tomschalken/pen/RoZzMe
Vielen Dank für diesen Blogbeitrag.
sehr klar erwähnt.
Ich liebe das. Es ist ein großartiges visuelles Werkzeug für Content-Autoren.
Außerdem können Sie mit einem winzigen zusätzlichen Teil in diesem Lesezeichen die zusätzlichen Vollpunkte, die überall herumliegen, bereinigen.
http://codepen.io/fatmedia/pen/gLGqYr
Ich wollte die Rückwärtsoptik zum Laufen bringen, da ich denke, dass sie ein wichtiger Teil davon ist (und in keiner der geposteten Versionen gut repliziert wurde). Sie wird wahrscheinlich nicht viele Randfälle abdecken, aber ich denke, sie deckt einige ab.
Hier ist eine Version, die die Überprüfung „viele kurze Sätze“ durchführt und den gesamten Abschnitt rot einfärbt, wenn diese Bedingung erfüllt ist (und einige Überprüfungen von Zeilenendezeichen für Dinge wie „:“).
http://codepen.io/fatmedia/pen/QGqoGo
Ich habe schließlich zwei Konstruktoren erstellt, einen, der den Absatz in ein Array von Sätzen zerlegt, und einen anderen, der den Wrapper basierend auf der Länge des Satzes hinzufügt.
http://codepen.io/alexstandiford/pen/LbOpOy
Ich habe eine schnelle Lösung mit React gefunden. http://codepen.io/anon/pen/KNyaPr?editors=0010
Schöne Visualisierung. Aber meiner Meinung nach nicht für reale Situationen verwendbar. Das Aufteilen eines Textes in Sätze kann recht schwierig werden. Zum Beispiel gibt es mehr Satzzeichen als einen Punkt. Beispiele sind? ! . Und wie geht man mit Abkürzungen wie z.B. um?
Ich habe an einem kleinen Testprojekt gearbeitet, bei dem ich Sätze aufteilen musste. Als ich weiter in Richtung Mehrsprachigkeit ging, landete ich im Bereich der natürlichen Sprachverarbeitung.
Ich möchte nicht `var` innerhalb von `if` im allerersten Pen sehen müssen, und andere JavaScript-Anfänger sollten das auch nicht sehen. (http://stackoverflow.com/a/1162756)
http://codepen.io/anon/pen/YpYLNL?editors=0010