Junk formatting: Pasting Rich Text

Known Issues
1

The issue of white fills appearing behind pasted text has been a problem for years. And sometimes the white fill appears when I hit a style button in the Text Inspector. Because of this, I have to keep a text editor open to clear out formatting so I can paste text without making a mess. I’d like to see if this issue could be addressed.

Example: I typed this into a text box:

sample block of styled text

I copied it and pasted it at the end of the end of the line of text. With the pasted text, the bold and italics were dropped and a white fill appeared behind it. When looking at the inner HTML, this is what I found:

sample <b>block</b> of <i>styled</i> text&nbsp;<span style="color: rgb(0, 0, 0); font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-variant: normal; text-align: left; text-transform: none; text-indent: 0px; line-height: normal; letter-spacing: normal; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);">sample block</span><span style="color: rgb(0, 0, 0); font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);">&nbsp;of&nbsp;</span><i style="color: rgb(0, 0, 0); font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-variant: normal; text-align: left; text-transform: none; text-indent: 0px; line-height: normal; letter-spacing: normal; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);">styled</i><span style="color: rgb(0, 0, 0); font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);">&nbsp;text</span>

That works out to a junk-to-text ratio of 23:1. Yikes!

2

TLDR:
To avoid copying CSS styles, copy and paste text straight into the Inner HTML editor, or duplicate entire Text elements. Using the cursor to copy and paste text may capture unwanted styles.

Hype’s scene editor is highly modified web browser based on the Webkit engine. When you’re seeing text on the scene, you’re seeing a combination of the properties in the text inspector, element inspector, and the webkit engine’s rendering of your text. When you create a text box and add this in the inner html:

sample <b>block</b> of <i>styled text</i>

Hype uses that string as a starting point, and then sets additional CSS properties to that element (like padding within the text element, positioning, whether it should create scroll bars if it extends beyond the text block, etc.) This could include things like this:

color: rgb(0, 0, 0); font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-variant: normal; text-align: left; text-transform: none; text-indent: 0px; line-height: normal; letter-spacing: normal; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);

Duplicating a text element doesn’t mean a 23x increase in the file size: it is dynamically added based on what properties you’ve set in Hype’s text inspector, and will be slightly different whether you’re loading that text in IE6 or Firefox.

For Safari, Hype generates the code below:

    <div class="HYPE_element" id="hype-obj-7G428WVDCFQCONLF72C8" style=
    "pointer-events: auto; position: absolute; padding: 8px; overflow: visible; 
word-wrap: break-word; z-index: 1; white-space: nowrap; font-family: 
Helvetica, Arial, sans-serif; font-size: 16px; display: inline; color: rgb(0, 0, 0); 
transform-origin: 50% 50%; transform: translateX(137px) translateY(99px) rotateY(0deg);">
    sample <b>block</b> of <i>styled text</i>
    </div>

When you select text with your cursor, you’re copying the built-in browser’s knowledge of the text (Webkit), which includes things like the background color of the text. When you copy and paste an entire text element (without actually selecting text), you’re not capturing this ‘junk’, you’re just making a duplicate of an element and its simpler inner HTML.

That being said, this is something that we’d like to address!

3

Hi @Daniel. As I mentioned in anther post. I would always use paste and match style so it doesn’t bring in any unwanted baggage.

4

image
image.png939×520 60.4 KB

Is this part of the same issue? The pasted text is one color, the typography inspector indicates a different color.

5

Yes, typically if there’s inner html styling that is overriding the element’s “top-level” styles then that would cause the inspector to show the wrong thing. You can choose Edit > Edit Element’s Inner HTML and see what is there and remove excess HTML tags. Also when pasting, I recommend choosing Edit > Paste and Match Style (command-option-shift-v) to remove the text’s styling.