Wie umschließen Sie jeden Absatz mit einem benutzerdefinierten Textfeld in Word?

659
Ooker

Ich habe ein normales Chat-Gespräch geführt und muss sie ähnlich anzeigen, wie sie in Messenger entworfen wurden. Da dies ein langes Gespräch ist, brauche ich eine Methode, um es auf einmal zu tun. Ich weiß, dass es unmöglich sein könnte, alles zu haben, also muss ich es so nah wie möglich nachahmen.

  • Linksbündige graue Blasen (103, 184, 104) mit schwarzem Text;
    Rechtsbündige grüne Blasen (241, 240, 240) mit weißem Text
  • Blasen brechen nur nach einem Absatz (entspricht einer Eingabetaste beim Chatten). Lange Nachrichten mit mehreren Zeilen werden in einer Blase gehalten.
  • Linker und rechter Rand sind Halbkreis
  • Ränder zwischen derselben Farbblase sind klein. Bonus: Die Ränder zwischen verschiedenen Farbblasen sind groß.


Wie umschließen Sie jeden Absatz mit einem benutzerdefinierten Textfeld in Word?

Zu Ihrer Information: Welche Textverarbeitungswerkzeuge, die mit arbeiten können, erschweren das Textboxen? in Graphic Design
Wie kann man jede Zeile in einer Blase wie Chat-Gespräche gestalten? in TeX

0
Haben Sie versucht, das Skript anzupassen, das in der Antwort auf die Frage im ersten Artikel enthalten ist, mit dem Sie verlinkt haben? Ich stimme mit dem Autor dieser Antwort überein: HTML / CSS ist bei weitem der einfachste Weg, um das zu tun, was Sie wollen - und wird mit ziemlicher Sicherheit auch das beste Ergebnis liefern. cnread vor 6 Jahren 1

2 Antworten auf die Frage

2
john c. j.

Klicken Sie auf Multifunktionsleiste > Einfügen > Formen und zeichnen Sie ein einfaches Rechteck mit geraden Kanten.

enter image description here

Doppelklicken Sie darauf, geben Sie Text ein und ändern Sie dann Hintergrund und Ränder nach Belieben sowie die Textausrichtung (auf der rechten Seite).

Erstellen Sie nun eine andere Form, wie hier gezeigt:

enter image description here

Ändern Sie die Farben dieser Form und passen Sie die Höhe so an, dass sie mit der ersten Form identisch ist. Erstellen Sie dann eine Kopie davon. Also haben wir jetzt:

enter image description here

Und jetzt richten Sie sie in einer Zeile aus:

enter image description here

Erstellen Sie nun ein weiteres Rechteck:

enter image description here

Ändern Sie die Farben und drehen Sie sie: Klicken Sie mit der rechten Maustaste darauf und wählen Sie Weitere Layoutoptionen > Größe > Drehung: 90 .

enter image description here

Jetzt hast du:

enter image description here

Sie müssen es verkleinern und mit Ihrer "kombinierten" Form kombinieren. Das ist, was ich meine:

enter image description here

enter image description here

Als Nächstes müssen Sie ein breites und ein niedriges Rechteck zeichnen, um eine weiße Linie zwischen den Blasen zu simulieren. Ergebnis:

enter image description here

Das ist alles. Während Ihrer Arbeit können Sie diese Funktionen nützlich finden:

  • Wählen Sie mehrere Formen (mit der Strg-Taste) aus, klicken Sie mit der rechten Maustaste darauf und wählen Sie "Gruppieren".
  • Wählen Sie eine Form aus, klicken Sie mit der rechten Maustaste darauf und wählen Sie "Nach vorne bringen" oder "Nach hinten bringen".

Beachten Sie auch, dass Word kein Werkzeug für solche Arbeit ist. Ja, du kannst es schaffen, aber du solltest nicht.

1
cnread

Wie ich in einem Kommentar erwähnt habe, ist HTML / CSS eine bessere und viel einfachere Methode als Word. Sie können das gewünschte Ergebnis (einschließlich leicht abgerundeter oberer rechter und / oder rechter rechter Ecken, an denen eine Blase auf eine andere der gleichen Farbe trifft) durch einige einfache HTML-Anweisungen und nur ein paar CSS-Regeln abrufen, anstatt eine einzufügen Reihe von Word-Formen. Meistens, um meine Neugier zu befriedigen, kam ich zu folgendem Beispiel.

Chat bubbles via HTML/CSS

Sie können wahrscheinlich find / replace verwenden, um einen Großteil der Arbeit für die Umwandlung des Rohtextes des Chat-Transkripts in HTML zu erledigen. Wenn Sie weitere solche Transkripte haben, mit denen Sie in Zukunft arbeiten können, können Sie das CSS einmalig als separate .css-Datei erstellen und es dann beliebig oft wiederverwenden. Dann müssen Sie nur die Transkripte in HTML umwandeln. So brauchen auch längere Transkripte nicht so viel Aufwand.

Die Nützlichkeit dieses Ansatzes hängt jedoch etwas vom endgültigen Format ab, das Sie für Ihr Dokument benötigen.

  • Wenn Sie die Word-Datei für das Chat-Protokoll in ein PDF-Dokument zur Verteilung umwandeln, ist diese Lösung ein direkter Ersatz, da Sie die gerenderte HTML-Seite auch in ein PDF-Dokument umwandeln können.
  • Selbst wenn das endgültige Dokument sowohl das Chat-Transkript als auch andere in Word geschriebene Inhalte enthalten muss, können Sie diesen Ansatz wahrscheinlich weiterhin für den ersten verwenden und dann die verschiedenen PDF-Dateien mithilfe eines Tools kombinieren, das diese Art von Aufgaben ausführt.
  • Wenn Sie das Dokument als Word-Datei verteilen, Ihre Benutzer den Chat-Text jedoch nicht bearbeiten müssen, können Sie die HTML-Ausgabe einfach als PDF oder Grafik einfügen.
  • Wenn Sie das Dokument als Word-Datei verteilen und Ihre Benutzer den Chat-Text bearbeiten müssen, ist dies leider nicht sinnvoll.

Hier ist was ich getan habe. Einige Aspekte davon können zweifellos etwas verfeinert werden.

  1. Ich habe mit einem Chatprotokoll angefangen, das so beginnt und die Namen der beiden Sprecher und Zeitstempel enthält. (Das CSS wird diese Informationen schließlich ausblenden, sodass Sie sie möglicherweise vollständig auslassen.)

    12:13:14 Karen Lorem ipsum dolor sit amet, consectetur adipiscing elit. 12:13:20 Karen Integer nec odio. 12:13:25 Karen Praesent libero. 12:13:35 Karen Sed cursus ante dapibus diam.  12:13:59 Juan Sed nisi. 12:14:10 Juan Nulla quis sem at nibh elementum imperdiet. 
  2. Ich habe eine .html-Datei für das Transkript erstellt, die die verschiedenen Absätze, die Zeitstempel und die Namen der Sprecher markiert, wie in Abschnitt 4.13.4 („Konversationen“) des HTML 5.1-Standards empfohlen . Ich habe auch einige <div>Elemente hinzugefügt, um die Beitragsblöcke von jedem Sprecher zu trennen, einschließlich eines benutzerdefinierten data-Attributs zur Identifizierung der beiden Sprecher (a und b statt Karen und Juan, um das CSS für weitere Transkripte erneut verwenden zu können).

    <!doctype html> <html lang='en'> <head> <meta charset='utf-8'> <title>Chat</title> </head> <body> <main> <div data-person='a'> <p><time>12:13:14</time> <b>Karen</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p><time>12:13:20</time> <b>Karen</b> Integer nec odio.</p> <p><time>12:13:25</time> <b>Karen</b> Praesent libero.</p> <p><time>12:13:35</time> <b>Karen</b> Sed cursus ante dapibus diam.</p> </div> <div data-person='b'> <p><time>12:13:59</time> <b>Juan</b> Sed nisi.</p> <p><time>12:14:10</time> <b>Juan</b> Nulla quis sem at nibh elementum imperdiet.</p> </div> </main> </body> </html> 
  3. Zum Schluss habe ich diese 8 Stilregeln erstellt. Ich habe sie einfach direkt in mein HTML-Dokument (in ein <style>Element innerhalb des <head>Elements) eingefügt. Wie bereits erwähnt, können Sie jedoch auch eine separate, wiederverwendbare .css-Datei erstellen.

    [data-person] { border-width:0; margin:0; padding:0; width:50%; } [data-person='b'] { position:relative; right:-50%; } [data-person] > p { margin:0; border:1px solid white; border-radius:1.5em 0.5em 0.5em 1.5em; padding:0.5em 1em; width:auto; max-width:100%; min-width:auto; float:right; clear:both; } [data-person='a'] > p { background:rgb(241,240,240); color:rgb(0,0,0); } [data-person='b'] > p { background:rgb(103,184,104); color:rgb(255,255,255); } [data-person] > p:last-of-type { border-bottom-right-radius:1.5em; } [data-person] > p:first-of-type { border-top-right-radius:1.5em; margin-top:2em; } [data-person] > p > time:first-of-type, [data-person] > p > b:first-of-type { display:block;width:0;height:0;overflow:hidden; } 

    (Die letzte Regel verbirgt die Zeitstempel und die Namen der Sprecher. Wenn Sie diese Informationen in Ihrem Transkript nicht angegeben haben, können Sie die letzte CSS-Regel weglassen.)

Das ist es. Die Ausgabe ist oben dargestellt. Diese Grafik wurde in Safari aufgenommen, aber das Ergebnis war in allen anderen Browsern, die ich ausprobierte, dasselbe: Firefox, Microsoft Edge, Internet Explorer und sogar Opera und Vivaldi. Beachten Sie jedoch, dass einige der abgerundeten Ecken in Firefox und Edge recht pixelig aussehen können, abhängig von den Farben, die ich für die Blasen verwendet habe.