From 55a4f3e3a1124fdbf7dad75cde040c6f7fa88c6e Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 30 Jul 2015 00:48:20 +0100
Subject: [PATCH] display zalgo'd nicknames correctly on chrome/osx

---
 skins/base/css/molecules/MemberTile.css     |  3 +++
 skins/base/css/molecules/SenderProfile.css  |  3 ++-
 skins/base/views/molecules/MemberTile.js    | 14 ++++++++++++--
 skins/base/views/molecules/MessageTile.js   |  2 +-
 skins/base/views/molecules/SenderProfile.js | 13 ++++++++++++-
 5 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css
index fcfc60a00e..2033b5b03e 100644
--- a/skins/base/css/molecules/MemberTile.css
+++ b/skins/base/css/molecules/MemberTile.css
@@ -98,6 +98,9 @@ limitations under the License.
     opacity: 0.5;
 }
 
+.mx_MemberTile_zalgo {
+    font-family: Helvetica, Arial, Sans-Serif;
+}
 
 .mx_MemberTile_leave {
     float: right;
diff --git a/skins/base/css/molecules/SenderProfile.css b/skins/base/css/molecules/SenderProfile.css
index 18523a9b3f..adf729dda0 100644
--- a/skins/base/css/molecules/SenderProfile.css
+++ b/skins/base/css/molecules/SenderProfile.css
@@ -14,5 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SenderProfile {
+.mx_SenderProfile_zalgo {
+    font-family: Helvetica, Arial, Sans-Serif;
 }
diff --git a/skins/base/views/molecules/MemberTile.js b/skins/base/views/molecules/MemberTile.js
index 574be2254e..d37a0cb52c 100644
--- a/skins/base/views/molecules/MemberTile.js
+++ b/skins/base/views/molecules/MemberTile.js
@@ -25,6 +25,10 @@ var MemberTileController = require("../../../../src/controllers/molecules/Member
 var MemberInfo = ComponentBroker.get('molecules/MemberInfo');
 var ErrorDialog = ComponentBroker.get("organisms/ErrorDialog");
 
+// The Lato WOFF doesn't include sensible combining diacritics, so Chrome chokes on rendering them.
+// Revert to Arial when this happens, which on OSX works at least.
+var zalgo = /[\u0300-\u036f\u1ab0-\u1aff\u1dc0-\u1dff\u20d0-\u20ff\ufe20-\ufe2f]/;
+
 module.exports = React.createClass({
     displayName: 'MemberTile',
     mixins: [MemberTileController],
@@ -65,18 +69,24 @@ module.exports = React.createClass({
         var name = this.props.member.name;
         if (isMyUser) name += " (me)";
         var leave = isMyUser ? <span className="mx_MemberTile_leave" onClick={this.onLeaveClick}>X</span> : null;
+
+        var nameClass = this.state.hover ? "mx_MemberTile_nameSpan" : "mx_MemberTile_name";
+        if (zalgo.test(name)) {
+            nameClass += " mx_MemberTile_zalgo";
+        }
+
         var nameEl;
         if (this.state.hover) {
             nameEl =
                 <div className="mx_MemberTile_nameWrapper">
                     <MemberInfo member={this.props.member} />
-                    <span className="mx_MemberTile_nameSpan">{name}</span>
+                    <span className={nameClass}>{name}</span>
                     {leave}
                 </div>
         }
         else {
             nameEl =
-                <div className="mx_MemberTile_name">
+                <div className={nameClass}>
                     {name}
                     {leave}
                 </div>
diff --git a/skins/base/views/molecules/MessageTile.js b/skins/base/views/molecules/MessageTile.js
index d868b143a5..b9a57079ff 100644
--- a/skins/base/views/molecules/MessageTile.js
+++ b/skins/base/views/molecules/MessageTile.js
@@ -57,7 +57,7 @@ module.exports = React.createClass({
             mx_MessageTile_notSent: this.props.mxEvent.status == 'not_sent',
             mx_MessageTile_highlight: this.shouldHighlight(),
             mx_MessageTile_continuation: this.props.continuation,
-            mx_MessageTile_last: this.props.last
+            mx_MessageTile_last: this.props.last,
         });
         var timestamp = <MessageTimestamp ts={this.props.mxEvent.getTs()} />
         var avatar, sender, resend;
diff --git a/skins/base/views/molecules/SenderProfile.js b/skins/base/views/molecules/SenderProfile.js
index d71d1c2226..c4bec306bc 100644
--- a/skins/base/views/molecules/SenderProfile.js
+++ b/skins/base/views/molecules/SenderProfile.js
@@ -17,9 +17,14 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+var classNames = require("classnames");
 
 var SenderProfileController = require("../../../../src/controllers/molecules/SenderProfile");
 
+// The Lato WOFF doesn't include sensible combining diacritics, so Chrome chokes on rendering them.
+// Revert to Arial when this happens, which on OSX works at least.
+var zalgo = /[\u0300-\u036f\u1ab0-\u1aff\u1dc0-\u1dff\u20d0-\u20ff\ufe20-\ufe2f]/;
+
 module.exports = React.createClass({
     displayName: 'SenderProfile',
     mixins: [SenderProfileController],
@@ -28,12 +33,18 @@ module.exports = React.createClass({
         var mxEvent = this.props.mxEvent;
         var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
 
+        var classes = classNames({
+            mx_SenderProfile: true,
+            // taken from https://en.wikipedia.org/wiki/Combining_character
+            mx_SenderProfile_zalgo: zalgo.test(name),
+        });
+
         var msgtype = mxEvent.getContent().msgtype;
         if (msgtype && msgtype == 'm.emote') {
             name = ''; // emote message must include the name so don't duplicate it
         }
         return (
-            <span className="mx_SenderProfile">
+            <span className={classes}>
                 {name}
             </span>
         );