diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css index fcfc60a0..2033b5b0 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 18523a9b..adf729dd 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 574be225..d37a0cb5 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 ? X : 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 =