Wrap spike 2
Wrap spike 2 (split start cards): a throwaway test post. Each heading says what should happen.
Test 1: float left, long text. The text wraps beside the image, then runs underneath it.
This paragraph is ordinary Ghost text, typed in the editor, not inside the card. In email it should sit beside the image and then carry on at full width once it passes the bottom of the image.
A second paragraph keeps going so the text is clearly taller than the image. Ghost’s own paragraph styling should apply here, exactly as it does everywhere else in the newsletter: the same font, size, colour and spacing.
A third paragraph. By now the text should have passed the image and be running the full width of the column. If this line is still squeezed beside empty space, the float isn’t working on this surface.
A fourth paragraph, for good measure, so the flow under the image is easy to see on a wide screen as well as in the email column.
Test 2: float right, short text, end card = clear div.
Only one short paragraph here, so the image is taller than the text and the end card has to clear the float.
↑ This heading should sit BELOW the image (Test 2 clear).
This paragraph follows the heading at full width.
Test 3: float left, short text, end card = clear div + <br clear="all">.
Only one short paragraph here, so the image is taller than the text and the end card has to clear the float.
↑ This heading should sit BELOW the image (Test 3 clear).
This paragraph follows the heading at full width.
Test 4: the email card is a bare <img align="left"> instead of a table (for comparison in Outlook).
This paragraph is ordinary Ghost text, typed in the editor, not inside the card. In email it should sit beside the image and then carry on at full width once it passes the bottom of the image.
A second paragraph keeps going so the text is clearly taller than the image. Ghost’s own paragraph styling should apply here, exactly as it does everywhere else in the newsletter: the same font, size, colour and spacing.
A third paragraph. By now the text should have passed the image and be running the full width of the column. If this line is still squeezed beside empty space, the float isn’t working on this surface.
End of the test post.
