Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allowing for any HEX color when highlighting text #76

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Allowing for any HEX color when highlighting text #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f5016d0
Adding support for colspan in tables
filipkis Mar 30, 2017
de6eff1
Merge branch 'images-external' of https://github.com/fran-worley/html…
filipkis Mar 30, 2017
ca7b9c1
Adding support for text color
filipkis Apr 2, 2017
14e4f0a
Merge remote-tracking branch 'upstream/master'
filipkis Jan 11, 2019
df81043
Add support for any HEX color
filipkis Jan 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,10 +134,11 @@ All standard html elements are supported and will create the closest equivalent

### Highlighting text

You can add highlighting to text by wrapping it in a span with class h and adding a data style with a color that wordml supports (http://www.schemacentral.com/sc/ooxml/t-w_ST_HighlightColor.html) ie:
You can add highlighting to text by wrapping it in a span with class h and adding a data style with a color that wordml supports (http://www.schemacentral.com/sc/ooxml/t-w_ST_HighlightColor.html) or a HEX color value ie:

```html
<span class="h" data-style="green">This text will have a green highlight</span>
<span class="h" data-style="B2B2B2">This text will have a light gray highlight</span>
```

### Page breaks
Expand Down
7 changes: 5 additions & 2 deletions docs/styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@ Returns a page break

<span class="h" data-style="chosen-color">Highlighted Text Here</span>

Will highlight text
Will highlight text with predefined color

As per: http://www.schemacentral.com/sc/ooxml/t-w_ST_HighlightColor.html these are your color choices
You can specify the color as 6 character HEX color (e.g. `FFFFFF` for white, `FF00000` for red) or one of the following
text values:

Valid value | Description
-------------- | ----------------
Expand All @@ -40,6 +41,8 @@ darkGray | Dark Gray Highlighting Color
lightGray | Light Gray Highlighting Color
none | No Text Highlighting

As per: http://www.schemacentral.com/sc/ooxml/t-w_ST_HighlightColor.html

### Text Align (not in readme)

It looks like adding the following classes will align text in your word document appropriately.
Expand Down
19 changes: 17 additions & 2 deletions lib/htmltoword/xslt/base.xslt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,12 +266,20 @@
<xsl:otherwise><xsl:value-of select="./@data-style"/></xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:variable name="colorList" select="'black blue cyan green magenta red yellow white darkBlue darkCyan darkGreen darkMagenta darkRed darkYellow darkGray lightGray'" />
<xsl:choose>
<xsl:when test="preceding-sibling::h1 or preceding-sibling::h2 or preceding-sibling::h3 or preceding-sibling::h4 or preceding-sibling::h5 or preceding-sibling::h6 or preceding-sibling::table or preceding-sibling::p or preceding-sibling::ol or preceding-sibling::ul or preceding-sibling::div or following-sibling::h1 or following-sibling::h2 or following-sibling::h3 or following-sibling::h4 or following-sibling::h5 or following-sibling::h6 or following-sibling::table or following-sibling::p or following-sibling::ol or following-sibling::ul or following-sibling::div">
<w:p>
<w:r>
<w:rPr>
<w:highlight w:val="{$color}"/>
<xsl:choose>
<xsl:when test="contains(concat(' ', $colorList, ' '),concat(' ', $color, ' '))">
<w:highlight w:val="{$color}"/>
</xsl:when>
<xsl:otherwise>
<w:color w:val="{$color}"/>
</xsl:otherwise>
</xsl:choose>
</w:rPr>
<w:t xml:space="preserve"><xsl:value-of select="."/></w:t>
</w:r>
Expand All @@ -280,7 +288,14 @@
<xsl:otherwise>
<w:r>
<w:rPr>
<w:highlight w:val="{$color}"/>
<xsl:choose>
<xsl:when test="contains(concat(' ', $colorList, ' '),concat(' ', $color, ' '))">
<w:highlight w:val="{$color}"/>
</xsl:when>
<xsl:otherwise>
<w:color w:val="{$color}"/>
</xsl:otherwise>
</xsl:choose>
</w:rPr>
<w:t xml:space="preserve"><xsl:value-of select="."/></w:t>
</w:r>
Expand Down
59 changes: 59 additions & 0 deletions spec/xslt_simple_text_style_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,65 @@
compare_resulting_wordml_with_expected(html, expected_wordml.strip)
end

it "transforms text color classes" do
html = <<-EOL
<!DOCTYPE html>
<html>
<head></head>
<body>
<div> Testing <span class="h" data-style="eeeeee">grey</span> text</div>
<p> Testing <span class="h" data-style="eeeeee">grey</span> text</p>
<span> Testing <span class="h" data-style="eeeeee">grey</span> text</span>
</body>
</html>
EOL
expected_wordml = <<-EOL
<w:p>
<w:r>
<w:t xml:space="preserve"> Testing </w:t>
</w:r>
<w:r>
<w:rPr>
<w:color w:val="eeeeee"/>
</w:rPr>
<w:t xml:space="preserve">grey</w:t>
</w:r>
<w:r>
<w:t xml:space="preserve"> text</w:t>
</w:r>
</w:p>
<w:p>
<w:r>
<w:t xml:space="preserve"> Testing </w:t>
</w:r>
<w:r>
<w:rPr>
<w:color w:val="eeeeee"/>
</w:rPr>
<w:t xml:space="preserve">grey</w:t>
</w:r>
<w:r>
<w:t xml:space="preserve"> text</w:t>
</w:r>
</w:p>
<w:p>
<w:r>
<w:t xml:space="preserve"> Testing </w:t>
</w:r>
<w:r>
<w:rPr>
<w:color w:val="eeeeee"/>
</w:rPr>
<w:t xml:space="preserve">grey</w:t>
</w:r>
<w:r>
<w:t xml:space="preserve"> text</w:t>
</w:r>
</w:p>
EOL
compare_resulting_wordml_with_expected(html, expected_wordml.strip)
end

it "transforms all combinations of b, strong, em and italic within div and p" do
html = <<-EOL
<!DOCTYPE html>
Expand Down