Page 1 of 1

WebHelp customization: Localized text in HTML fragment

Posted: Mon Jun 03, 2019 6:02 pm
by 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

Re: WebHelp customization: Localized text in HTML fragment

Posted: Wed Jun 05, 2019 11:47 am
by 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

Re: WebHelp customization: Localized text in HTML fragment

Posted: Fri Jun 07, 2019 3:31 pm
by ionela
Hi Frank,

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

Regards,
Ionela

Re: WebHelp customization: Localized text in HTML fragment

Posted: Tue Jun 11, 2019 3:53 pm
by Frank Ralf
Hi Ionela,

Many thanks for this information.

Best regards,
Frank

Re: WebHelp customization: Localized text in HTML fragment

Posted: Tue Jun 11, 2019 4:37 pm
by 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

Re: WebHelp customization: Localized text in HTML fragment

Posted: Tue Aug 13, 2019 1:55 pm
by 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

Re: WebHelp customization: Localized text in HTML fragment

Posted: Wed Aug 14, 2019 12:44 pm
by Frank Ralf
Hi Anton,

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

Carriage return: &#xD;
Line feed: &#xA;

I haven't tested this, though.

Best regards,
Frank

Re: WebHelp customization: Localized text in HTML fragment

Posted: Thu Sep 26, 2019 10:49 pm
by shudson310
tonra wrote:
Wed Jun 05, 2019 11:47 am
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?

Re: WebHelp customization: Localized text in HTML fragment

Posted: Wed Oct 02, 2019 12:22 pm
by 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"/>

Re: WebHelp customization: Localized text in HTML fragment

Posted: Wed Oct 02, 2019 4:02 pm
by shudson310
That worked very well! Thank you for the troubleshooting assistance! #bestcustomerservice