Skip to content
This repository has been archived by the owner on Dec 9, 2018. It is now read-only.

Stroked Text #81

Merged
merged 2 commits into from
Feb 1, 2013
Merged

Stroked Text #81

merged 2 commits into from
Feb 1, 2013

Conversation

jahewson
Copy link
Contributor

I've implemented stroked text, and split the text color into two separate colors for fill and stroke. This works perfectly in WebKit via -webkit-text-stroke and is emulated in other browsers using text-shadow.

  • The text-shadow fallback does not support color: transparent for fills, because the shadow occupies the entire area behind the text and so a transparent color results in seeing the entire shadow. I've used color: white as the "no-fill" fallback, so that at least when the background is white it works correctly.
  • I've not used the stroke width from GfxState, because the text-shadow fallback forces both color and width to be defined at the same time, which doesn't fit well with the existing color+hash mechanism used in the "install" procedures. I've used a sensible default based on the em size.

Here's some sample output and the sample PDF, note that the yellow filled text does not appear filled in Firefox because it is not using the stroke + fill rendering mode, it is actually two pieces of text layered on top of each other.

John Hewson added 2 commits January 31, 2013 22:21
Conflicts:
	src/HTMLRenderer/general.cc
	src/HTMLRenderer/state.cc
@@ -125,6 +125,22 @@ span {
}
.a {
}
/* transparent color - Firefox, IE, etc. */
.ct { /*fill*/
color: white;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not color:transparent
we cannot assume that the background is white.

And yeah, we are running out of letters for the classes, I'll have to rearrange them.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't work because the shadow occupies the entire area behind the text and not just the area around the edges. So you end up just seing the shadow color filling the entire text, which is equivalent to filling the text with the stroke color. Presuming the background is white is the best we can do, it's going to work 80% of the time.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right..hmm let me think about it

@coolwanglu
Copy link
Owner

Good job! Please check my comments.

You just trigger my "better, moreflexible class style names and state tracing, when there are too many styles" job.

And do you have any test cases for this? I don't have one.

@jahewson
Copy link
Contributor Author

jahewson commented Feb 1, 2013

And do you have any test cases for this? I don't have one

I linked to a PDF file in my original pull request message.

coolwanglu added a commit that referenced this pull request Feb 1, 2013
@coolwanglu coolwanglu merged commit ba97195 into coolwanglu:master Feb 1, 2013
@coolwanglu
Copy link
Owner

Thanks!
merged into master.

I'll revise and write the state classes. Do you now think the 2nd approach (sequential chars) is better?

@coolwanglu
Copy link
Owner

Checking the code, why do you use two layers.

It should work if you set color: fill-color and text-shadow: stroke-color in CSS.

@jahewson
Copy link
Contributor Author

jahewson commented Feb 2, 2013

Checking the code, why do you use two layers.

That's just how the PDF was made, I didn't make it. Works fine in WebKit.

@coolwanglu
Copy link
Owner

So I guess it's the white-as-transparent issue.
I think color:transparent is fair enough, to make code simpler.

On Sat, Feb 2, 2013 at 11:40 PM, John Hewson notifications@github.comwrote:

Checking the code, why do you use two layers.

That's just how the PDF was made, I didn't make it. Works fine in WebKit.


Reply to this email directly or view it on GitHubhttps://github.com//pull/81#issuecomment-13032244.

@coolwanglu
Copy link
Owner

No, color:trasparent does not fix this. Let me think about it..

On Sat, Feb 2, 2013 at 11:42 PM, 王璐 coolwanglu@gmail.com wrote:

So I guess it's the white-as-transparent issue.
I think color:transparent is fair enough, to make code simpler.

On Sat, Feb 2, 2013 at 11:40 PM, John Hewson notifications@github.comwrote:

Checking the code, why do you use two layers.

That's just how the PDF was made, I didn't make it. Works fine in WebKit.


Reply to this email directly or view it on GitHubhttps://github.com//pull/81#issuecomment-13032244.

@jahewson
Copy link
Contributor Author

jahewson commented Feb 2, 2013

So I guess it's the white-as-transparent issue.

Yes, the layering is just a quirk of this particular PDF file. The stroke + fill render mode (mode 2) should work fine in Firefox - I just don't have a PDF to hand which uses that mode.

@jahewson
Copy link
Contributor Author

jahewson commented Feb 2, 2013

Try this PDF file which uses text rendering mode 2 (fill + stroke)

http://libharu.sourceforge.net/demo/text_demo.pdf

It works fine in Firefox.

@coolwanglu
Copy link
Owner

OK. I'll mark it as need solution in wiki, and leave the code as it is
for now.

On Sat, Feb 2, 2013 at 11:51 PM, John Hewson notifications@github.comwrote:

Try this PDF file which uses text rendering mode 2 (fill + stroke)

http://libharu.sourceforge.net/demo/text_demo.pdf

It works fine in Firefox.


Reply to this email directly or view it on GitHubhttps://github.com//pull/81#issuecomment-13032419.

@jahewson
Copy link
Contributor Author

jahewson commented Feb 2, 2013

There isn't a solution as far as I can tell until text-stroke becomes part of CSS, rather than WebKit only.

@coolwanglu
Copy link
Owner

Actually render them into the background image is a solution... with a
hidden text layer on top of it...

On Sat, Feb 2, 2013 at 11:56 PM, John Hewson notifications@github.comwrote:

There isn't a solution as far as I can tell until text-stroke becomes
part of CSS, rather than WebKit only.


Reply to this email directly or view it on GitHubhttps://github.com//pull/81#issuecomment-13032511.

@jahewson
Copy link
Contributor Author

jahewson commented Feb 2, 2013

Actually render them into the background image is a solution... with a
hidden text layer on top of it...

Yuck.

@coolwanglu
Copy link
Owner

I just broke the text stroke simulation in Firefox, in order to "show" hidden text in HTML (render==3).
This will be useful for scanned PDF files, where there is a hidden text layer above the scanned image.

@anirbanmu
Copy link

@jahewson @coolwanglu this is a long shot but I'm hitting an issue which I THINK is related to this PR. On Chrome (or it seems other webkit browsers) I'm seeing a stroke on text that SHOULD be invisible. I'm trying to figure out what this PR was originally trying to solve? I'm trying to nail down why a particular document is getting this stroke applied by pdf2htmlEX & how I might solve the issue on my side.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants