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 ba931b9cbf..af2d4be4ab 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 d18fdc809c..da95352296 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 e4d310c048..152fde1f7c 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 6471a86cb6..ac11dde7c0 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 cfeaeaee0c..de34de595e 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 3fb38c317f..428d39e659 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 5519c14de5..1a4fdbf329 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 45db913e68..fd88ee27f7 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 df699e6490..774f177a4f 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 c09685aad8..ef0173d975 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 } );