<html>
    <head>
      <base href="https://bugs.documentfoundation.org/">
    </head>
    <body>
      <p>
        <div>
            <b><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - Many margin comments/notes are complicated to use"
   href="https://bugs.documentfoundation.org/show_bug.cgi?id=38295#c18">Comment # 18</a>
              on <a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - Many margin comments/notes are complicated to use"
   href="https://bugs.documentfoundation.org/show_bug.cgi?id=38295">bug 38295</a>
              from <span class="vcard"><a class="email" href="mailto:notebook22312@gmail.com" title="BottleOnTheGround <notebook22312@gmail.com>"> <span class="fn">BottleOnTheGround</span></a>
</span></b>
        <pre>Created <span class=""><a href="http://bugs.documentfoundation.org/attachment.cgi?id=153331" name="attach_153331" title="example styling in html (should work properly in firefox)">attachment 153331</a> <a href="http://bugs.documentfoundation.org/attachment.cgi?id=153331&action=edit" title="example styling in html (should work properly in firefox)">[details]</a></span>
example styling in html (should work properly in firefox)

My suggestion for the UI regarding coloring looks as described below.

Example:
=========
  - The attachment writer_comment_UI_example.html shows a living   example of
the description below (without lines for comments, because they are difficult
  - The attachment writer_comment_UI.png shows an example of the transparency
of unfocussed comments.

Not selected / focussed comment:
====================================
  - transparency of background / marking / text is 50%.
  - marked text has dashed border

Comment selection:
==================
  - Definition: 
      - mouse cursor is hovers over comment area.
      - mouse cursor is hovers over marked text.

  - transparency of text marking border becomes 0%.
  - transparency of marked text becomes 0%.


Comment focus:
==================
  - Definition:
      - typing cursor is inside a comment

  - like selected comment, but:
     - border width increases.
     - dashed lines are solid.

Further improvement
====================
There is still a problem, if comments and text are so far away, that both
cannot be shown on screen. As solving that problem makes things more difficult,
I only focussed on coloring / styling in this post.</pre>
        </div>
      </p>


      <hr>
      <span>You are receiving this mail because:</span>

      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>