How to force a line break without using

Question

I want to break a line in a tooltip of highcharts. I added br tag to do so and it works fine. The only problem is that I am trying to perform localization on that particular string also.

gettextCatalog.getString("Click the bar to view <br/>detailed information about <br/>events for the time range <br/>represented by the bar.");

Using br tag prevents IE11 and edge browser to localise that string due to <> symbols. So i need to find a way of breaking a line without using
tag. I tried lte and gte to replace <> tag. It enables localization in all browsers but does not perform line break.

I even tried:

gettextCatalog.getString("Click the bar to view \n detailed information about <br/>events for the time range");

higcharts-tooltip code:

tooltip: {

                                        formatter: function () {
                                            var content;
                                            var nameLabel;
                                            content = "<strong>" + gettextCatalog.getString("Event Time") + ":</strong> " + Highcharts.dateFormat("%H:%M:%S", this.x) + "<br/>";

                                            nameLabel = this.series.name;
                                            if (nameLabel === highCardinalitySelector) {
                                                nameLabel = otherLabel;
                                            }

                                            content += "<strong>" + $scope.eventfieldName + ":</strong> " + nameLabel + "<br/><strong>" + eventCountTypeLabel + ":</strong> " + this.y.toFixed(decimals) + "<br/>"; // jscs:ignore maximumLineLength
                                            if ($scope.chartType == "Stacked Bar 2D") {
                                                content += "<strong>" + gettextCatalog.getString("Total") + ":</strong> " + this.point.stackTotal.toFixed(decimals) + "<br/>";
                                            }
                                            content += "<br/>";
                                            content +=  gettextCatalog.getString("Click the bar to view" + String.fromCharCode(13) + String.fromCharCode(10) + "\n detailed information about \nevents for the time range \n represented by the bar."); // jscs:ignore maximumLineLength
                                            return content;
                                        },
                                        style: {
                                            color: "#333",
                                            fontSize: "11px",
                                            padding: "8px"
                                        },
                                        borderColor: "#CCC",
                                        followPointer: true
                                    },

I looked through the following links and tried out the suggested solutions but nothing seems to work. How can I add line break to html text without using any html tag

Give a line break without using <br/>

Is there any other way to add line break in a string ? Please help.

Answer 1

String.fromCharCode(10)

The Javascript String.fromCharCode() function generates a string, from a Unicode character code. In your case the relevant character code is probably 10, line feed.

So your statement would become

gettextCatalog.getString(
  "Click the bar to view" + String.fromCharCode(10) +
  "detailed information about" + String.fromCharCode(10) +
  "events for the time range" + String.fromCharCode(10) +
  "represented by the bar.");

If that doesn't work you might try String.fromCharCode(13).

If even that doesn't work you might in desperation try the 13 followed by the 10.

gettextCatalog.getString(
  "Click the bar to view" 
  + String.fromCharCode(13) 
  + String.fromCharCode(10) 
  + "detailed information about" 
  + String.fromCharCode(13)
  + String.fromCharCode(10)
  + "events for the time range" 
  + String.fromCharCode(13) 
  + String.fromCharCode(10) 
  + "represented by the bar.");

Which one works best will depend on what the tooltip display handler is expecting. Most likely the 10 on its own will work.

(Please let us know if it works, and if so which one.)

Answer 2

You could set the style white-space: pre-line on the element containing the string, then just use regular linebreaks (\n in Javascript). I don't know if this would work with the translation library you're using though.

Better yet set a max-width on the tooltip element and don't use hardcoded line breaks at all.

Answer 3

Maybe add the line breaks AFTER the translation

I realise that my previous answer may have misunderstood your question, and your problem might in fact be in the choice to put the line breaks in first.

Remember that in another language

(a) the sentence fragments might have different lengths than in English, and

(b) the places at which we break in English may not leave translatable fragments for the destination language.

So perhaps you should write a simple function to add in the line breaks after translation, or even set the tool-tip to insert its own line breaks if that is an inherent feature of the tool-tip software.