From kde-kimageshop Sun Feb 26 20:00:41 2017 From: Wolthera Date: Sun, 26 Feb 2017 20:00:41 +0000 To: kde-kimageshop Subject: Some notes on speech bubbles Message-Id: X-MARC-Message: https://marc.info/?l=kde-kimageshop&m=148813926121961 MIME-Version: 1 Content-Type: multipart/mixed; boundary="--001a11c04b80e455bc0549746a6e" --001a11c04b80e455bc0549746a6e Content-Type: text/plain; charset=UTF-8 Hey everyone, I am currently at boud & irina's place and doing random Krita things. We did a lot today, so I decided to write up a little report to clear my head. boud suggested I should sent it to the mailing list. Day 1: ===== I tried to do some work on modernising the Calligraphy tool. Attempt to turn KarbonCalligraphicShape into a KoPathShape instead of a KoParametric shape. ------------------------------------------------------------------------------------------------------------------------------------------ This would have allowed all the stuff from KoPathShape to be used directly instead of via parametric shape. This turned out to be too complicated. Attempt to make the Karboncalligraphicpoint use kispaintinformation. ---------------------------------------------------------------------------------------------------- This was succesfull. It'll at the very least allow for easier stroking of a path with a paintop in the future. The biggest blocker right now is getting the drawing angle inside the KisPaintInformation to work. Day 2: ===== boud really wanted to see how much work a speech bubble generator would be, so we started doing some work on that. In my case I mostly did research while boud wrote a shape class. Investigate balloon and vector stroke stuff in Clip Paint Studio. ------------------------------------------------------------------------------------------ Clip Studio Paint/Manga studio is the only other painting application that has a speech bubble generator. Some interesting observations: 1. Text-workflow: 1. The user writes a text, which creates a text-shape. 2. Then they add a bubble, this is always a non-parametric path shape, but the functions for adding a main shape can be done via a geometric tool, or a drawing line tool. You cannot edit this circle afterwards, only the path it generates. 3. The bubble tail is added afterwards. Again, like the main shape it's a generic path, but with a tool to simplify adding them... But for some reason, the tool only allows editing the final shape. 4. Text tool has -- infamously -- no wordwrap. 5. The balloons can be stroked with vector lines like waves and music notes. There's also shapes, which have some kind of vector rendering on the lines... this is used to draw the so-called Uni(Sea Urchin) thought bubbles. 6. If there's multiple bubbles on one text/balloon layer, they get merged automatically. 7. Overal thoughts: This is strangely overengineered for what it can do. The whole layer is constructed to allow merging together of paths and the paths can be customised in depth, but why not have word-wrap? I mean, I know why there's no word-wrap: they wrote their own engine, and scripts like Japanese and Chinese are practically monospaced, so it's not much effort to figure out how they should wrap, but it is still odd. Manga Studio 4's bubble generatorfelt more sane. 2. The vector engine can only do cubic/cusp style nodes. Sure it has variable width strokes on all paths, but the limited design of the curves surprised me. This comes across as a bit annoying, as the paths it outputs are always too precise with many little nodes. The redraw tools then become a little more sensible as to their exact existence, but still. * Stroking, btw, cannot use the smudge capabilities in this program. 3. The smudge brush, has a mode where... it seems the drawn dab is pushed through a simple blur filter before it is drawn onto the canvas. This is also what PTSai's watercolor pen does. It might be interesting for us, because it can get more smoother mixes. One final note, boud has noticed that Krita, Photoshop and Clip studio paint are equally slow on the Wacom Mobile Studio thing, so from now on, when people say 'PS is so much faster', we should just ask for a video showing the comparison. Consider what we would want as a workflow: ---------------------------------------------------------------- 1. The user writes a text in a rich-text editor. 2. They adjust the parameters. So, style, font, balloon options. 3. The text and the balloons are generated as follows: 1. Each paragraph in the rich text becomes a seperate text that can be moved around separately. This allows for complex speech bubble configurations, like multiple balloons connected with lines. 2. Each raw line break(BR, not P) is left alone, so that would only affect the text paragraphs. 3. The texts get a bubble/balloon/cartouche, and between bubbles, we draw connection lines. 4. The user can drag bubbles so they 'merge'. We need to consider still whether this merging will mean a single block with multiple paragraphs or just the two bubbles merging(maybe a good thing for the configuration?). 4. When the user resizes a bubble, the font size is left alone. Observing from comic books, if the font is not adjusted within the text itself, it seems to be generally consistent. We will need to decide what to do for sound effects. Tech-talk: -------------- We managed to create a balloon vector object that takes a QTextDocument. We pour a bit of HTML into the QTextDocument, and then we access the paragraphs(QTextBlocks), and of those we access the QTextLayout. We then iterate and separately position the QTextLine objects in the QTextLayout and tell the QTextLayout to render. Tl;dr: We've managed to make a teensy balloon shape that can render a HTML richtext. It's a wee bit buggy still but it word-wraps flawlessly. Questions: * How are we going to deal with assigning color to the text, and to the balloon. Use styles for this? * What to do with sound effects. * QTextDocument does not support Top-to-Bottom rendering... This might be extended in the future if we can get things to work... though the code involved with the QTextLayout is very complicated due to proper ligature support. * Speaking of ligatures... accessing special characters inside a font might be tricky(swashes, etc) * Also problematic but necessary to consider: - https://www.w3.org/TR/css-writing-modes-3/#propdef-text-orientation - https://www.w3.org/TR/css-ruby-1/ Investigating speech-bubbles ------------------------------------------ I came across some articles on speech bubbles while searhcing for the Umi name. * https://en.wikipedia.org/wiki/Speech_balloon is pretty thorough about the different types. * http://www.academia.edu/4905806/Beyond_Speech_Balloons_and_Thought_Bubbles_The_integration_of_text_and_image This is an academic article that studies the way different speech bubbles generate semantic meaning. Kinda on the semantic/semiotic side, so a little abstract. * http://www.hoodedutilitarian.com/2010/06/visual-languages-of-manga-and-comics/ Oldie on the way how the reading structure and nature of the balloons is different between American and Japanese comics. * http://sundaycomicsdebt.blogspot.nl/2010/07/here-have-balloon.htmlAlso looking at the place of speech bubbles in American vs Japanese comics. Annoyingly, American comics are 'western' here. Europe, which does have its own comics tradition, its own formatting for page structures and thus its own traditions in terms of speechbubbles, does not exist as far as this article is concerned. -- Wolthera --001a11c04b80e455bc0549746a6e Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable
Hey everyone,

I am currently at bou= d & irina's place and doing random Krita things. We did a lot today= , so I decided to write up a little report to clear my head. boud suggested= I should sent it to the mailing list.

Day 1:

=3D=3D=3D=3D=3D

I tried to do some work on modernising the Calligra= phy tool.


Attempt to turn KarbonCalligraphicS= hape into a KoPathShape instead of a KoParametric shape.

--------------------------------------------------= ---------------------------------------------------------------------------= -------------

This would have allowed all the stu= ff from KoPathShape to be used directly instead of via parametric shape. Th= is turned out to be too complicated.


Attempt to make the Karboncalligrap= hicpoint use kispaintinformation.

-------------------------------------------------------------------------= ---------------------------

This was succesfull. It'll at t= he very least allow for easier stroking of a path with a paintop in the fut= ure. The biggest blocker right now is getting the drawing angle inside the = KisPaintInformation to work.


Day 2:

=3D=3D=3D=3D=3D

boud really wanted to see how much work a speech bu= bble generator would be, so we started doing some work on that. In my case = I mostly did research while boud wrote a shape class.


Investigate balloon and vector stro= ke stuff in Clip Paint Studio.

-= ---------------------------------------------------------------------------= --------------

Clip Studio Paint/Manga studio is t= he only other painting application that has a speech bubble generator. Some= interesting observations:


1. Text-workflow:

=C2=A0 1. The user writes a text, w= hich creates a text-shape.

=C2=A0 2. Then they add a bubble, t= his is always a non-parametric path shape, but the functions for adding a m= ain shape can be done via a geometric tool, or a drawing line tool. You can= not edit this circle afterwards, only the path it generates.

=C2=A0 3. The bubble tail is added = afterwards. Again, like the main shape it's a generic path, but with a = tool to simplify adding them... But for some reason, the tool only allows e= diting the final shape.

=C2=A0 4. Text tool has -- infamous= ly -- no wordwrap.

=C2=A0 5. The balloons can be strok= ed with vector lines like waves and music notes. There's also shapes, w= hich have some kind of vector rendering on the lines... this is used to dra= w the so-called Uni(Sea Urchin) thought bubbles.

=C2=A0 6. If there's multiple b= ubbles on one text/balloon layer, they get merged automatically.

=C2=A0 7. Overal thoughts: This is = strangely overengineered for what it can do. The whole layer is constructed= to allow merging together of paths and the paths can be customised in dept= h, but why not have word-wrap? I mean, I know why there's no word-wrap:= they wrote their own engine, and scripts like Japanese and Chinese are pra= ctically monospaced, so it's not much effort to figure out how they sho= uld wrap, but it is still odd. Manga Studio 4's bubble generatorfelt mo= re sane.

2. The vector engine can only do cu= bic/cusp style nodes. Sure it has variable width strokes on all paths, but = the limited design of the curves surprised me. This comes across as a bit a= nnoying, as the paths it outputs are always too precise with many little no= des. The redraw tools then become a little more sensible as to their exact = existence, but still.

=C2=A0 * Stroking, btw, cannot use = the smudge capabilities in this program.

3. The smudge brush, has a mode whe= re... it seems the drawn dab is pushed through a simple blur filter before = it is drawn onto the canvas. This is also what PTSai's watercolor pen d= oes. It might be interesting for us, because it can get more smoother mixes= .


One final note, boud has noticed that Krita, Photoshop an= d Clip studio paint are equally slow on the Wacom Mobile Studio thing, so f= rom now on, when people say 'PS is so much faster', we should just = ask for a video showing the comparison.


Consider what we would want as a wo= rkflow:

------------------------= ----------------------------------------


1. The user writes a text in a rich= -text editor.

2. They adjust the parameters. So, = style, font, balloon options.

3. The text and the balloons are ge= nerated as follows:

=C2=A0 1. Each paragraph in the ric= h text becomes a seperate text that can be moved around separately. This al= lows for complex speech bubble configurations, like multiple balloons conne= cted with lines.

=C2=A0 2. Each raw line break(BR, n= ot P) is left alone, so that would only affect the text paragraphs.

=C2=A0 3. The texts get a bubble/ba= lloon/cartouche, and between bubbles, we draw connection lines.

=C2=A0 4. The user can drag bubbles= so they 'merge'. We need to consider still whether this merging wi= ll mean a single block with multiple paragraphs or just the two bubbles mer= ging(maybe a good thing for the configuration?).

4. When the user resizes a bubble, = the font size is left alone. Observing from comic books, if the font is not= adjusted within the text itself, it seems to be generally consistent. We w= ill need to decide what to do for sound effects.


Tech-talk:

--------------


We managed to create a balloon vect= or object that takes a QTextDocument. We pour a bit of HTML into the QTextD= ocument, and then we access the paragraphs(QTextBlocks), and of those we ac= cess the QTextLayout. We then iterate and separately position the QTextLine= objects in the QTextLayout and tell the QTextLayout to render.


Tl;dr: We've managed to make a teensy balloon shape that can rende= r a HTML richtext. It's a wee bit buggy still but it word-wraps flawles= sly.


Questions:


* How are we going to deal with ass= igning color to the text, and to the balloon. Use styles for this?

* What to do with sound effects.

* QTextDocument does not support To= p-to-Bottom rendering... This might be extended in the future if we can get= things to work... though the code involved with the QTextLayout is very co= mplicated due to proper ligature support.

* Speaking of ligatures... accessin= g special characters inside a font might be tricky(swashes, etc)

* Also problematic but necessary to= consider:

=C2=A0 - https://www.w3.org/TR= /css-writing-modes-3/#propdef-text-orientation

=C2=A0 - https://www.w3.org/TR/css-ruby-1/


Investigating speech-bubbles

--------------------------------------= ----


I came across some articles on speech bubbles whil= e searhcing for the Umi name.


* https://en.wikipedia.org/wiki/Speech_balloon is= pretty thorough about the different types.

* http://www.academia.edu/4905806/Beyond_Speech_Balloons_and_Tho= ught_Bubbles_The_integration_of_text_and_image This is an academic arti= cle that studies the way different speech bubbles generate semantic meaning= . Kinda on the semantic/semiotic side, so a little abstract.

* http://www.hooded= utilitarian.com/2010/06/visual-languages-of-manga-and-comics/ Oldie on = the way how the reading structure and nature of the balloons is different b= etween American and Japanese comics.

* http://sundaycomicsdebt.b= logspot.nl/2010/07/here-have-balloon.htmlAlso looking at the place of s= peech bubbles in American vs Japanese comics. Annoyingly, American comics a= re 'western' here. Europe, which does have its own comics tradition= , its own formatting for page structures and thus its own traditions in ter= ms of speechbubbles, does not exist as far as this article is concerned.


--
Wolthera
--001a11c04b80e455bc0549746a6e--