display zalgo'd nicknames correctly on chrome/osx

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;

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;
 }

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>

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;

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>
         );