adobe-webplatform / dropcap.js Goto Github PK

Hello!

The Dropcap works great in general, but on any Apple mobile devices, the letter is overlapping and the size is not proportional anymore.

Thanks!

Hello,

This issue is quite rare, and happens only of paragraph with dropcap is located right next to one or more floated elements.

Particular use-case. Imagine we have an article content blocks, which have some content paraagraphs as well as "inline widgets". Inline widgets are at same level as pargraphs, but floated to the right to look like "sidebar". Design will explain better: http://joxi.ru/VrwYpLphdyOZ2X.

Here is how it's done:

• Widgets are floated to the left;
• Widgets are "clear:both" so that they don't stack in top of each other;
• Widgets are moved out of the paragraph with negative margin-left;
• Body have padding on the left equal to negative margin-left of the widgets;

This way we can place any number of widgets in any place of article body, along with paragraphs.

But with this setup, this plugin has a positioning issue with a letter. Because widgets are floated and cleared, letter is moved down below last floated widget. Here is a demo: https://jsfiddle.net/psheiman/xu9aadoc/5/

Any ideas on how to fix this?

The issue is well-illustrated in 2.8 Space Around Initial Letters from the spec.

It’s reproducible in the demo on Chrome 39 and Safari 8.0.2 with the letter “J” when you choose Baskerville, Garamond, or Palatino as the drop cap font family. For the letter “Q”, on the other hand, the exclusion area includes all of the descender in Palatino (plus extra), almost all of it in Garamond, and part, but not all of it, in Baskerville. See:

Baskerville

Garamond

Palatino

Please create a demo site and how-to use code samples included there

Although you have a bower.json file now, the package has not been registered, so cannot be pulled into projects yet:

http://bower.io/search/?q=dropcap

You can register it using the instructions here:

http://bower.io/docs/creating-packages/#register

There's no interaction possible within Dolphin for Android. Tested with the example page.

Hello!
Please, could you help me with the issue on iPhone on this website: http://ecupatria.org
There is a broblem with baseline, I tried different things to fix it, but it still doesn't work properly.
Many thanks in advance!

Seems to be broken on Mobile browsers? Pops up over the paragraph. (or is this a feature not a bug?)

On Desktop:

On Mobile:

Relevant code in question: https://github.com/adobe-webplatform/dropcap.js/blob/master/src/layout.js#L126-L140

Description:

The .dcapjsStrut property holding the cache of the strut <span> of the designated dropcap element (dcap in the code) is not invalidated in anyway on subsequent reruns of .layoutDropcap.

The outdated cache is a problem for reconciliation-based frameworks such as ReactJS. When new content is loaded into an application using dropcap.js, the dropcap's content and children are replaced, but the element itself stays the same. The lack of an actual strut <span> leads to expected bugs:

Here's the expected behaviour:

Workaround:

The current workaround is to set .dcapjsStrut of any dropcap elements to null before running Dropcap.layout().

Solution:

One solution would be to give a class to the strut <span>, and query the dropcap element for that instead of saving it as an attribute of the element. The class would be something like ._dropcap-strut and could even be a configurable option.

If that solution works, I'll gladly go ahead and make a PR for it!

Here's an edge case for you!

Working with this library in conjunction with another JS library that uses iframes. It was working fine in Firefox but crashing Chrome. Debugged for awhile and learned that Chrome handles objects inside of an iframe differently than Firefox, as is discussed in this answer on Stack Overflow.

My super-quick solution was to add a fourth parameter to Dropcap.layout called "disableCheck" - if set to True, it'll ignore the check. Figured that wouldn't fly as a pull request, but I'm not sure how to do it better.

Are you guys planning to use Web Font Icon?

I came across this project and wondered what was wrong with doing drop caps with :first-letter. The README doesn't explain the limitations of the CSS-only technique; it just links off to a sarcastic Tumblr of bad examples.

Looks like you guys actually wrote a good post on that very subject that I'd encourage sharing in the README for the benefit of other curious folk:
http://blogs.adobe.com/webplatform/2014/10/02/drop-caps-are-beautiful/

It would be great if this module were importable in Node. That would allow us to build with it using Browserify in the usual way. Right now we have to sort of hack it in.

The trick would be to detect the presence of export and write to that instead of window. I can cook up a PR if you're up for it.

The letter Q seems to be the only capital letter that regularly drops down below the baseline. This seems to render an extra line when using this script. See the Interactive Demo for replication of this. http://webplatform.adobe.com/dropcap.js/dropcap-demo.html

I guess it's not too big of an issue, although it can mess around paragraph formatting at times.

Is this supposed to be compatible with fonts being pulled in by TypeKit?

The dropcap is fine on first load. When navigating to the same page, or back/forward to the page from another page, the dropcap grows to the wrong height (default 3 line height?). This is oddly only happening with one of the fonts, Playfair Display. It does not occur with the text set to Lato. Both fonts are included via Google Fonts default LINK method. I've made a test page highlighting the issue:
http://www.joshuawinn.com/examples/dropcap/dropcap.html

And screenshot of first load and navigating to same page via link:

The lack of a bower.json prevents it being registered in the bower registry and causes some tooling to fail to recognize it when installed using bower.

First!!

Let's assume you can do this: window.CSS && window.CSS.supports("-webkit-initial-letter", "1");

I suggest you need two flags:

A. onlyExecuteIfNativeIsMissing (or something like that) where the JS will early return if the test above returned false. This would allow an author to write CSS rules that use initial-letter as well as include dropcap.js and not have them conflict.

B. preferNativeImplementation where dropcap.js would use initial-letter rather than setting the styles on the objects. This is actually quite annoying to do thanks to the 💩 that is the CSS OM, where you can't create a pseudo-style directly, but you have to create a whole new style rule, etc.

To reproduce (tested in Firefox):

• open a new tab and go to an article URL; the dropcap should be broken
• navigating to any orther article should show the dropcap broken
• now refresh the page; the dropcap should appear
• now navigating to any article should show the dropcap working
• close the tab and open a new one, and the dropcap is broken again

I have localised the problem to the following lines in dropcap.js. In particular, on the first run _isBlack(middleYline, y) never returns true, so bottomL is null, and so is the resulting ratio:

 92     // From the bottom, go up until we fnd the first black pixel
 93     for (var y = canvas.height-1; y >= 0; y--) {
 94         if (_isBlack(middleYline, y)) {
 95             bottomL = y;
 96             break;
 97         }
 98     }
 99 
100     // From the top, go down until the first black pixel
101     for (var y = 0; y < canvas.height; y++) {
102         if (_isBlack(middleYline, y)) {
103             ratio = (bottomL + 1 - y)/height;
104             break;
105         }
106     }

I have been assuming the problem was with our own setup, but upon fairly extensive investigation I've been unable to determine what.

Your current LICENSE.MD states:

Copyright 2014 Adobe Systems Incorporated. All rights reserved.

and then:

Licensed under the Apache License, Version 2.0 (the "License"); ...

If you want to release the code under APLv2, you need to remove the "All rights reserved." sentence, so that the first line reads:

Copyright 2014 Adobe Systems Incorporated.