The capitalization of the “era labels” is governed by the font choice you make. Timeline’s inventor made design choices for some font sets that using the CSS “text-transform: uppercase” made for the best presentation.
If you don’t want it capitalized, you can either choose different fonts or override the rule for
.tl-timeline .tl-timenav-slider .tl-timeaxis {
...
text-transform: uppercase;
...
}
A crude test suggests that these font sets don’t use the uppercase transformation:
abril-droidsans
amatic-andika
bevan-pontanosans
bitter-raleway
clicker-garamond
dancing-ledger
fjalla-average
georgia-helvetica
knightlab
lustria-lato
medula-lato
opensans-gentiumbook
playfair
playfair-faunaone
pt
roboto-megrim
rufina-sintony
ubuntu
but you should try them to be sure.
It’s difficult to point to the location in the Timeline Font CSS where this rule is implemented because of the minification, but the pre-compilation line that is the specific reason you’re seeing it in uppercase is
https://github.com/NUKnightLab/TimelineJS3/blob/master/source/less/fonts/font.pt.less#L32
I hope this helps. We will also be updating the Italian translation to use ‘a.C.’ as the prefix based on your information, in the next incremental update for TimelineJS.
Thread Starter
mrzpro
(@mrzpro)
Hi Joe, I tried to change the uppercase to lowercase but, as imaginable, nothing changes indeed there is a strange “http error 500”. I tried also to find where the CSS call the font family but, my Version is 3.4.0.0, and it seems impossible, due to minification, to find the correct place…
It is, admittedly, a little involved. Remember, you could simply choose a different font-family which doesn’t apply the ‘uppercase’ transformation. But if that doesn’t satisfy…
The typography is loaded from font-choice-specific CSS files which are generated with a LESS compiler. The base files are at https://github.com/NUKnightLab/TimelineJS3/tree/master/source/less/fonts
If you don’t want to set up to do the compilation, you can edit the files directly. As the name suggests, by default, the one you would want to edit is …/css/fonts/font.default.css
Yes, as a minimized file, it is hard to edit. Use a CSS formatter like http://www.cleancss.com/css-beautify/ to replace the minimized contents of the file with technically equivalent CSS rules that are easier to edit.
Also, rather than ‘lowercase’ you probably want ‘none’, at least, if you want ‘a.C.’ (lowercase would get ‘a.c.’)
Hopefully this helps.
Thread Starter
mrzpro
(@mrzpro)
Hi Joe, I tried in so many ways but without result.
In my custom css I addedd:
.tl-timeline .tl-timenav-slider .tl-timeaxis {text-transform: none;}
ane I edited font.default.css
using some font families you reported but nothing happens…
Thank you for your kind cooperation
Thread Starter
mrzpro
(@mrzpro)
Hi Joe, at last I solved my problem but I had to modify the following:
.vco-timeline .vco-navigation .timenav .time .time-interval div {text-transform: none !important;}
.vco-timeline .vco-navigation .timenav .time .time-interval-major div {text-transform: none !important;}
.vco-slider .nav-previous .date, .vco-slider .nav-next .date {text-transform: none !important;}
Probably there is a simplest way but at the moment I found this…
Please let me know if there is a possibility to simplify it
