WebHelp customization: Localized text in HTML fragment

[Frank Ralf]

Hi,

I'm customizing the WebHelp Responsive and want to insert an HTML fragment that contains text that must be localized.

I've read "How to Localize the Interface of WebHelp Responsive Output" and suppose that I must add my string to one of the translation files and then reference it in the HTML fragment, probably using the i18n macro: ${i18n(string.id)}.

Is that correct?

Best regards,
Frank

[tonra]

Hello Frank,

I was just going to post a quite similar question when I found your thread.

In my understanding, the localization features provided by Oxygen are limited to the interface of the output (e. g. search field placeholder text etc.).

I use HTML fragments containing localized content, too. It's wrapped in several div elements with the lang attribute.
In a first approach, I used JavaScript to display elements with the relevant language only. However, I would prefer using an XSLT-based solution instead. Unfortunately, I'm currently failing at accessing the HTML fragment file from the XSLT stylesheet (createMainPage.xsl) in order to copy the relevant (localized) content to the target (Main Page, wt_index.html). I've already checked commonComponentsExpander.xsl which seems to be responsible for filling the HTML fragments but haven't found a solution yet.

Best regards,
Anton

[ionela]

Hi Frank,

Your finding are corrects. This is recommended way to localize that string.

Regards,
Ionela

[Frank Ralf]

Hi Ionela,

Many thanks for this information.

Best regards,
Frank

[Frank Ralf]

Here's an example for the syntax, taken from com.oxygenxml.webhelp.responsive/oxygen-webhelp/page-templates/wt_search.html:

Code: Select all

<whc:macro value="${i18n(jump.to.results)}" />

The string is defined in com.oxygenxml.webhelp.responsive\oxygen-webhelp\resources\localization\strings-en-us.xml:

Code: Select all

<str name="jump.to.results" js="true" php="false">Jump to search results</str>

Best regards,
Frank

[tonra]

Hi,

thank you for posting an example, Frank. This approach meets my requirements almost perfectly.
There is only one thing I am currently missing: Is there an (elegant) way to add line breaks to a string?
I have tried several ways without success.

Best regards,
Anton

[Frank Ralf]

Hi Anton,

The usual way in XML is to use one or both of the following entities:

Carriage return: 
Line feed: 


I haven't tested this, though.

Best regards,
Frank

[shudson310]

In my understanding, the localization features provided by Oxygen are limited to the interface of the output (e. g. search field placeholder text etc.).

I use HTML fragments containing localized content, too. It's wrapped in several div elements with the lang attribute.
In a first approach, I used JavaScript to display elements with the relevant language only. However, I would prefer using an XSLT-based solution instead. Unfortunately, I'm currently failing at accessing the HTML fragment file from the XSLT stylesheet (createMainPage.xsl) in order to copy the relevant (localized) content to the target (Main Page, wt_index.html). I've already checked commonComponentsExpander.xsl which seems to be responsible for filling the HTML fragments but haven't found a solution yet.

I have a similar problem. I want to override the search field placeholder text. I want to add the publication name to the search placeholder. I tried adding the template from commonComponentsExpander.xsl to my custom.xsl in the publishing template directory:

I tried adding via variable, and via xpath override:

Code: Select all

${map-xpath(/bookmap//mainbooktitle)}

Code: Select all

<!-- Page title -->
                    <xsl:variable 
                        name="mainBookTitle" 
                        select="$mapTitle[contains(@class, 'booktitle')]/*[contains(@class, 'mainbooktitle')]"/>

Neither work in the customized template:

Code: Select all

<!-- 
        Expand the 'webhelp_search_input' place holder. 
    -->
    <xsl:template match="whc:webhelp_search_input" mode="copy_template">
        <!-- EXM-36737 - Context node used for messages localization -->
        <xsl:param name="i18n_context" tunnel="yes" as="element()*"/>
        <div>
            <xsl:call-template name="generateComponentClassAttribute">
                <xsl:with-param name="compClass">wh_search_input</xsl:with-param>
            </xsl:call-template>
            <!-- Copy attributes -->
            <xsl:copy-of select="@* except @class"/>
            
            <xsl:variable name="localizedSearch">
                <xsl:choose>
                    <xsl:when test="exists($i18n_context)">
                        <xsl:for-each select="$i18n_context[1]">
                            <xsl:call-template name="getWebhelpString">
                                <xsl:with-param name="stringName" select="'webhelp.search'"/>
                            </xsl:call-template>
                        </xsl:for-each>
                    </xsl:when>
                    <xsl:otherwise>Search</xsl:otherwise>
                </xsl:choose>
            </xsl:variable>
            <xsl:variable name="localizedSearchQuery">
                <xsl:choose>
                    <xsl:when test="exists($i18n_context)">
                        <xsl:for-each select="$i18n_context[1]">
                            <xsl:call-template name="getWebhelpString">
                                <xsl:with-param name="stringName" select="'search.query'"/>
                            </xsl:call-template>
                        </xsl:for-each>
                    </xsl:when>
                    <xsl:otherwise>Search query</xsl:otherwise>
                </xsl:choose>
            </xsl:variable>
            
            <xsl:variable name="search_comp_output">
                <form id="searchForm"
                    method="get"
                    role="search"                            
                    action="{concat($PATH2PROJ, 'search', $OUTEXT)}">
                    <div>
                        <input type="search" placeholder="{$localizedSearch} ${map-xpath(/bookmap//mainbooktitle)}" class="wh_search_textfield"
                            id="textToSearch" name="searchQuery" aria-label="{$localizedSearchQuery}" required="required"/>
                        <button type="submit" class="wh_search_button" aria-label="{$localizedSearch}"><span><xsl:value-of select="$localizedSearch"/></span></button>
                    </div>
                </form>
            </xsl:variable>
            
            <xsl:call-template name="outputComponentContent">
                <xsl:with-param name="compContent" select="$search_comp_output"/>
                <xsl:with-param name="compName" select="local-name()"/>
            </xsl:call-template>
        </div>
    </xsl:template>

, and added an extension point in the .opt file:

Code: Select all

            <extension 
                file="xsl/Custom.xsl" 
                id="com.oxygenxml.webhelp.xsl.webhelp_search_input"/>

It still doesn't seem to override the placeholder. What am I missing?

[radu_pisoi]

Hi,

You are on the right path, but there are two small issues you have to correct:

1. The XSLT extension point is wrong. The search form is displayed in three page templates: main page, search page and topic page. If you want to change the appearance for all pages you have to use the XSLT extension points associated with each page like in the following example:

Code: Select all

<xslt>
  <extension file="xslt/custom_search.xsl" id="com.oxygenxml.webhelp.xsl.createMainPage"/>
  <extension file="xslt/custom_search.xsl" id="com.oxygenxml.webhelp.xsl.createSearchPage"/>
  <extension file="xslt/custom_search.xsl" id="com.oxygenxml.webhelp.xsl.dita2webhelp"/>
</xslt>

2. In the XSLT template that you overwrite, whc:webhelp_search_input, you can use the mapTitle variable defined in the 'commonComponentsExpander.xsl' template. This variable points to the publication title.
Thus, a possible code could be:

Code: Select all

<input type="search" placeholder="{concat($localizedSearch, ' ', $mapTitle)}" class="wh_search_textfield"
    id="textToSearch" name="searchQuery" aria-label="{$localizedSearchQuery}" required="required"/>

[shudson310]

That worked very well! Thank you for the troubleshooting assistance! #bestcustomerservice