adobe-webplatform / dropcap.js Goto Github PK
View Code? Open in Web Editor NEWBeautiful CSS drop caps made easy
License: Other
Beautiful CSS drop caps made easy
License: Other
To reproduce (tested in Firefox):
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.
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:
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!
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!
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.
Is this supposed to be compatible with fonts being pulled in by TypeKit?
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!
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.
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.
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.
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.
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.
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:
There's no interaction possible within Dolphin for Android. Tested with the example page.
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:
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:
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?
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/
Please create a demo site and how-to use code samples included there
Are you guys planning to use Web Font Icon?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.