Some notes on speech bubbles

Sun Feb 26 20:00:41 UTC 2017

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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.kde.org/pipermail/kimageshop/attachments/20170226/4438661f/attachment.html>