From cd040ae0ddb55217cf7c64df09100f255bb7220d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 30 Nov 2015 01:13:59 +0000 Subject: [PATCH] fix zalgo properly! remove ugly regexp hacks for detecting combining diacritics and instead set the right font ordering, as Arial combines nicely with Myriad Pro whilst Helvetica doesn't. (Myriad Pro itself has no combining diacritic characters) --- src/skins/vector/css/common.css | 7 ++++++- src/skins/vector/css/molecules/EventAsTextTile.css | 1 + src/skins/vector/css/molecules/EventTile.css | 2 ++ src/skins/vector/css/molecules/MemberInfo.css | 4 +++- src/skins/vector/css/molecules/MemberTile.css | 4 ---- src/skins/vector/css/molecules/MessageComposer.css | 2 +- src/skins/vector/css/molecules/RoomHeader.css | 1 + src/skins/vector/css/molecules/SenderProfile.css | 5 ----- src/skins/vector/css/organisms/MemberList.css | 2 +- src/skins/vector/views/molecules/SenderProfile.js | 13 +------------ 10 files changed, 16 insertions(+), 25 deletions(-) diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index ba931b9c..af2d4be4 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -22,7 +22,12 @@ html { } body { - font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif; + /* Myriad Pro lacks combining diacritics, so these will fall through + to the next font. Helevetica's diacritics however do not combine + nicely with Myriad Pro (on OSX, at least) and result in a huge + horizontal mess. Arial empirically gets it right, hence prioritising + Arial here. */ + font-family: 'Myriad Pro', Arial, Helvetica, Sans-Serif; font-size: 16px; color: #454545; border: 0px; diff --git a/src/skins/vector/css/molecules/EventAsTextTile.css b/src/skins/vector/css/molecules/EventAsTextTile.css index d18fdc80..da953522 100644 --- a/src/skins/vector/css/molecules/EventAsTextTile.css +++ b/src/skins/vector/css/molecules/EventAsTextTile.css @@ -16,4 +16,5 @@ limitations under the License. .mx_EventAsTextTile { opacity: 0.5; + overflow-y: hidden; } diff --git a/src/skins/vector/css/molecules/EventTile.css b/src/skins/vector/css/molecules/EventTile.css index e4d310c0..152fde1f 100644 --- a/src/skins/vector/css/molecules/EventTile.css +++ b/src/skins/vector/css/molecules/EventTile.css @@ -45,6 +45,7 @@ limitations under the License. font-size: 14px; margin-bottom: 4px; display: block; + overflow-y: hidden; } .mx_EventTile .mx_MessageTimestamp { @@ -64,6 +65,7 @@ limitations under the License. .mx_MessageTile_content { display: block; margin-right: 100px; + overflow-y: hidden; } /* Various markdown overrides */ diff --git a/src/skins/vector/css/molecules/MemberInfo.css b/src/skins/vector/css/molecules/MemberInfo.css index 6471a86c..ac11dde7 100644 --- a/src/skins/vector/css/molecules/MemberInfo.css +++ b/src/skins/vector/css/molecules/MemberInfo.css @@ -37,8 +37,10 @@ limitations under the License. } .mx_MemberInfo_profileField { - opacity: 0.6; + font-color: #999999; font-size: 14px; + position: relative; + background-color: #fff; } .mx_MemberInfo_buttons { diff --git a/src/skins/vector/css/molecules/MemberTile.css b/src/skins/vector/css/molecules/MemberTile.css index cfeaeaee..de34de59 100644 --- a/src/skins/vector/css/molecules/MemberTile.css +++ b/src/skins/vector/css/molecules/MemberTile.css @@ -98,10 +98,6 @@ limitations under the License. opacity: 0.25; } -.mx_MemberTile_zalgo { - font-family: Helvetica, Arial, Sans-Serif; -} - .mx_MemberTile:hover .mx_MessageTimestamp { display: block; } diff --git a/src/skins/vector/css/molecules/MessageComposer.css b/src/skins/vector/css/molecules/MessageComposer.css index 3fb38c31..428d39e6 100644 --- a/src/skins/vector/css/molecules/MessageComposer.css +++ b/src/skins/vector/css/molecules/MessageComposer.css @@ -59,7 +59,7 @@ limitations under the License. box-shadow: none; /* needed for FF */ - font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif; + font-family: 'Myriad Pro', Arial, Helvetica, Sans-Serif; } /* hack for FF as vertical alignment of custom placeholder text is broken */ diff --git a/src/skins/vector/css/molecules/RoomHeader.css b/src/skins/vector/css/molecules/RoomHeader.css index 5519c14d..1a4fdbf3 100644 --- a/src/skins/vector/css/molecules/RoomHeader.css +++ b/src/skins/vector/css/molecules/RoomHeader.css @@ -111,6 +111,7 @@ limitations under the License. .mx_RoomHeader_nametext { display: inline-block; + overflow-y: hidden; } .mx_RoomHeader_settingsButton { diff --git a/src/skins/vector/css/molecules/SenderProfile.css b/src/skins/vector/css/molecules/SenderProfile.css index 45db913e..fd88ee27 100644 --- a/src/skins/vector/css/molecules/SenderProfile.css +++ b/src/skins/vector/css/molecules/SenderProfile.css @@ -13,8 +13,3 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ - -.mx_SenderProfile_zalgo { - font-family: Helvetica, Arial, Sans-Serif; - display: table-row ! important; -} diff --git a/src/skins/vector/css/organisms/MemberList.css b/src/skins/vector/css/organisms/MemberList.css index df699e64..774f177a 100644 --- a/src/skins/vector/css/organisms/MemberList.css +++ b/src/skins/vector/css/organisms/MemberList.css @@ -45,7 +45,7 @@ limitations under the License. } .mx_MemberList_invite { - font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif; + font-family: 'Myriad Pro', Arial, Helvetica, Sans-Serif; border-radius: 3px; border: 1px solid #f0f0f0; padding: 9px; diff --git a/src/skins/vector/views/molecules/SenderProfile.js b/src/skins/vector/views/molecules/SenderProfile.js index c09685aa..ef0173d9 100644 --- a/src/skins/vector/views/molecules/SenderProfile.js +++ b/src/skins/vector/views/molecules/SenderProfile.js @@ -17,11 +17,6 @@ limitations under the License. 'use strict'; var React = require('react'); -var classNames = require("classnames"); - -// 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', @@ -30,18 +25,12 @@ 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 ( - + {name} { this.props.aux } );