xslt change text based on background color brightness
Is there a way in xsl to change text color to black or white depending on the background color brightness?
So in the example below, based on background color brightness both greetings should have white text. Is there a built in function in xsl to accomplish this?
xsl
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"/>
<xsl:template match="greetings">
<xsl:apply-templates select="greeting"/>
</xsl:template>
<xsl:template match="greeting">
<html>
<body>
<h1>
<span>
<xsl:attribute name="style">
background-color: <xsl:value-of select="@backcolor"/>
color: <!-- Is there a way to make color black or white based on background color brightness? -->
</xsl:attribute>
<xsl:value-of select="."/>
</span>
</h1>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
xml
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="colortest.xslt"?> <!--todo: change this if copying to new file-->
<!--todo: change preceding line if copying to new file-->
<greetings>
<greeting id="1" backcolor="f59595">
Hello World!
</greeting>
<greeting id="2" backcolor="ff0000">
Hola!
</greeting>
</greetings>
You would have to work out the 'luminance' value of the RGB background colour and then take a threshold on that to determine if the foreground colour needs to be black or white (for best contrast). Unfortunately, XSLT (and XPath) don't provide any functions that deal with colours - and seeing as you're stuck with XSLT 1.0 (I'm assuming - because you're using it in browser?) things get a little verbose... but still possible...
Try something like this...
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"/>
<xsl:variable name="vHexDigits" select="'0123456789abcdef'"/>
<xsl:template match="greetings">
<html>
<body>
<xsl:apply-templates select="greeting"/>
</body>
</html>
</xsl:template>
<xsl:template match="greeting">
<xsl:variable name="vLuminance">
<xsl:call-template name="RGB2Luminance">
<xsl:with-param name="pRed" select="(string-length(substring-before($vHexDigits, substring(@backcolor,1,1))) * 16) + string-length(substring-before($vHexDigits, substring(@backcolor,2,1)))"/>
<xsl:with-param name="pGreen" select="(string-length(substring-before($vHexDigits, substring(@backcolor,3,1))) * 16) + string-length(substring-before($vHexDigits, substring(@backcolor,4,1)))"/>
<xsl:with-param name="pBlue" select="(string-length(substring-before($vHexDigits, substring(@backcolor,5,1))) * 16) + string-length(substring-before($vHexDigits, substring(@backcolor,6,1)))"/>
</xsl:call-template>
</xsl:variable>
<xsl:variable name="vForegroundColor">
<xsl:choose>
<!-- assume our black/white forground threshold is 0.5 -->
<xsl:when test="$vLuminance > 0.5">
<xsl:text>black</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:text>white</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<h1>
<span style="background-color: {@backcolor}; color: {$vForegroundColor};">
<xsl:value-of select="."/>
</span>
</h1>
</xsl:template>
<xsl:template name="RGB2Luminance">
<xsl:param name="pRed"/>
<xsl:param name="pGreen"/>
<xsl:param name="pBlue"/>
<xsl:variable name="vR" select="$pRed div 255"/>
<xsl:variable name="vG" select="$pGreen div 255"/>
<xsl:variable name="vB" select="$pBlue div 255"/>
<xsl:variable name="vMax">
<xsl:choose>
<xsl:when test="$vR >= $vG and $vR >= $vB">
<xsl:value-of select="$vR"/>
</xsl:when>
<xsl:when test="$vG >= $vR and $vG >= $vB">
<xsl:value-of select="$vG"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$vB"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:variable name="vMin">
<xsl:choose>
<xsl:when test="$vR <= $vG and $vR <= $vB">
<xsl:value-of select="$vR"/>
</xsl:when>
<xsl:when test="$vG <= $vR and $vG <= $vB">
<xsl:value-of select="$vG"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$vB"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:value-of select="($vMax + $vMin) div 2"/>
</xsl:template>
</xsl:stylesheet>
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xml" href="XSLTFile2.xslt"?>
<greetings>
<greeting id="1" backcolor="f59595">
Hello World!
</greeting>
<greeting id="2" backcolor="ff0000">
Hola!
</greeting>
</greetings>
Okay, if you want to use css to control your background color, use xml-stylesheet in your XML to point it to an XSLT file that does the following. This code will select the correct style sheet based on the listItemColor variable and replace the xml-stylesheet in your XML with the correct css stylesheet. (though I still don't know how listItemColor gets its value. Maybe you can tell us.)
Create two stylesheets, one for light and one for dark.
The following is the XSLTFile2.xslt file:
<xsl:variable name="listItemColor" select="'b'"/>
<xsl:template match="processing-instruction('xml-stylesheet')">
<xsl:choose>
<xsl:when test="listItemColor ='a'">
<xsl:processing-instruction name="xml-stylesheet">
<xsl:text>type="text/css" href="colortest.css"</xsl:text>
</xsl:processing-instruction>
</xsl:when>
<xsl:otherwise>
<xsl:processing-instruction name="xml-stylesheet">
<xsl:text>type="text/css" href="colortest2.css"</xsl:text>
</xsl:processing-instruction>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<!-- Do any other processing. -->
<!-- Identity template.-->
<xsl:template match="node()|@*">
<xsl:copy>
<xsl:apply-templates select="node()|@*"/>
</xsl:copy>
</xsl:template>
上一篇: 如何分组CSS颜色
下一篇: xslt根据背景颜色亮度更改文字