New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
FLUID-6204: Letter-Spacing preference #869
Changes from 13 commits
860da5f
a949e1d
009e369
81dd4d2
f1e74ac
34b48fa
d5bb514
a3e824c
24ace64
baab9df
887b585
0e70ac2
339ebcc
720ca5c
4e9babf
007dba5
e924865
81a11cf
4d4413d
0ea1ada
a968d23
0ea3517
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
{ | ||
"src": [ | ||
"svg/indicator-arrow-triangle.svg", | ||
"svg/crossout-diag-dotted-line.svg", | ||
"svg/contrast.svg", | ||
"svg/bigA.svg", | ||
"svg/smallA.svg", | ||
"svg/reset-undo-arrow.svg", | ||
"svg/line-space-expanded.svg", | ||
"svg/line-space-condensed.svg", | ||
"svg/line-space.svg", | ||
"svg/links.svg", | ||
"svg/simplify.svg", | ||
"svg/preferences.svg", | ||
"svg/font-style.svg", | ||
"svg/size.svg", | ||
"svg/text-to-speech-no-article.svg", | ||
"svg/table-of-contents.svg", | ||
"svg/character-spacing-expanded.svg", | ||
"svg/character-spacing-condensed.svg", | ||
"svg/character-spacing.svg" | ||
], | ||
"options": { | ||
"font": "PrefsFramework-Icons", | ||
"codepoints": { | ||
"character-spacing-expanded": "0xE000", | ||
"character-spacing-condensed": "0xE001", | ||
"character-spacing": "0xE002", | ||
"indicator-arrow-triangle": "0xE003", | ||
"crossout-diag-dotted-line": "0xE004", | ||
"contrast": "0xE005", | ||
"bigA": "0xE006", | ||
"smallA": "0xE007", | ||
"reset-undo-arrow": "0xE008", | ||
"line-space-expanded": "0xE009", | ||
"line-space-condensed": "0xE00a", | ||
"line-space": "0xE00b", | ||
"links": "0xE00c", | ||
"simplify": "0xE00d", | ||
"preferences": "0xE00e", | ||
"font-style": "0xE00f", | ||
"size": "0xE010", | ||
"text-to-speech-no-article": "0xE011", | ||
"table-of-contents": "0xE012" | ||
}, | ||
"templateOptions": { | ||
"classPrefix": "fl-icon-" | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<div> | ||
<h2 class="flc-prefsEditor-header"> | ||
<span class="fl-icon-letter-space"></span> | ||
<span class="flc-prefsEditor-label fl-heading-text" id="letter-space-label"></span> | ||
</h2> | ||
<p class="flc-prefsEditor-descr fl-prefsEditor-panel-descr"></p> | ||
<div class="flc-prefsEditor-textfieldStepper"> | ||
<span class="fl-icon-letter-space-condensed" role="presentation"></span> | ||
<span class="flc-textfieldStepper-focusContainer fl-textfieldStepper-focusContainer"> | ||
<button class="flc-textfieldStepper-decrease" type="button">-</button> | ||
<input aria-labelledby="letter-space-label" class="flc-textfieldStepper-field fl-textfieldStepper-textField" type="text"> | ||
<button class="flc-textfieldStepper-increase" type="button">+</button> | ||
</span> | ||
<span class="fl-icon-letter-space-expanded" role="presentation"></span> | ||
</div> | ||
</div> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
/* | ||
Copyright 2017 OCAD University | ||
|
||
Licensed under the Educational Community License (ECL), Version 2.0 or the New | ||
BSD license. You may not use this file except in compliance with one these | ||
Licenses. | ||
|
||
You may obtain a copy of the ECL 2.0 License and BSD License at | ||
https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt | ||
*/ | ||
|
||
var fluid_3_0_0 = fluid_3_0_0 || {}; | ||
|
||
(function ($, fluid) { | ||
"use strict"; | ||
|
||
/******************************************************************************* | ||
* letterSpace | ||
* | ||
* Sets the letter space on the container to the number of units to increase | ||
* the letter space by. If a negative number is provided, the space between | ||
* characters will decrease. Setting the size to 0 will use the default letter | ||
* space.`` | ||
*******************************************************************************/ | ||
|
||
// Note that the implementors need to provide the container for this view component | ||
fluid.defaults("fluid.prefs.enactor.letterSpace", { | ||
gradeNames: ["fluid.prefs.enactor", "fluid.viewComponent"], | ||
preferenceMap: { | ||
"fluid.prefs.letterSpace": { | ||
"model.value": "default" | ||
} | ||
}, | ||
fontSizeMap: {}, // must be supplied by implementors | ||
members: { | ||
root: { | ||
expander: { | ||
"this": "{that}.container", | ||
"method": "closest", // ensure that the correct document is being used. i.e. in an iframe | ||
"args": ["html"] | ||
} | ||
} | ||
}, | ||
invokers: { | ||
set: { | ||
funcName: "fluid.prefs.enactor.letterSpace.set", | ||
args: ["{that}", "{arguments}.0"] | ||
} | ||
}, | ||
modelListeners: { | ||
unit: { | ||
listener: "{that}.set", | ||
args: ["{change}.value"] | ||
} | ||
}, | ||
modelRelay: { | ||
target: "unit", | ||
singleTransform: { | ||
type: "fluid.transforms.round", | ||
scale: 1, | ||
input: { | ||
transform: { | ||
"type": "fluid.transforms.linearScale", | ||
"offset": -1, | ||
"input": "{that}.model.value" | ||
} | ||
} | ||
} | ||
|
||
} | ||
}); | ||
|
||
fluid.prefs.enactor.letterSpace.set = function (that, units) { | ||
var targetSize = units ? units + "em" : "normal"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What if There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @cindyli and spoke about this today after I had performed some experimentation. So the situation is a bit trickier for letter spacing. There are a couple of factors 1) we don't really know the base spacing (kerning, tracking) used within a font. The letter-spacing css property actually just adds space to whatever this original value is. Meaning we don't ever do true multiplication like in font size adjustments. 2) If an original CSS value was set to say 0.2em, and user increases the letter-spacing preference in UIO by 0.5. If we do a multiplication of these values, the size would actually become 0.1em, making the space smaller. Due to all of these factors we decided to add the original value to the UIO adjustment. That is is 0.2 + 0.5 resulting in 0.7em value being set. |
||
that.root.css("letter-spacing", targetSize); | ||
}; | ||
|
||
})(jQuery, fluid_3_0_0); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It seems using the default letter space is when the size (
value
) is set to 1, instead of 0.