View mode: basic / threaded / horizontal-split · Log in · Help
February 15, 2012
Re: D forums now live!
On Wednesday, 15 February 2012 at 02:11:45 UTC, Nick Sabalausky 
wrote:
> One issue I noticed though is that newlines don't seem to work:
>
> http://www.semitwist.com/download/img/shots/dforum.png

I've added a fallback CSS property for browsers that don't 
support CSS 3. Does it look better now?
February 15, 2012
Re: D forums now live!
On Tuesday, 14 February 2012 at 22:00:06 UTC, Walter Bright wrote:
> http://forum.dlang.org/
>
> This should replace the old miserable web interface to the 
> forums.
>
> Thanks to Vladimir Panteleev for an awesome job writing this!

This is great. I stopped using the old web interface years ago 
and was reading from gmane, although you can't post from there. 
I'm really happy to be able to use this now.
February 15, 2012
Re: D forums now live!
Using @media and different CSS settings for different screens was 
a smart move, but you are not using it correctly. By setting the 
font-size in pixels, you completely forgot about the screen 
density, and the forum might end up with really small text for 
mobile or desktop. Obviously, you can set the minimum font size 
in your browser, but that's not a solution, since that size is 
usually used for notes (like in wikipedia). For example, I have 
15pt as default and 10pt as minimum on my desktop. 10pt is really 
small for the post's text.

First of all, I recommend to use % for the body's font-size 
(which you are already using) and the rest should be set with em. 
That way, the body font-size will be equal to the browser default 
font size, and the rest of the page will be based on that size.

Another suggestion is using something like this: 
http://flexknowlogy.learningfield.org/2008/06/26/setting-font-size-proportional-to-window-size/

Here is an example of the js code:
function updateFontSize(){
  msg = document.body.clientWidth;

  var font_math = Math.round( 0.012 * msg * 10 );
  font_math = font_math < 100 ? 100 : font_math;

  $( "body" ).css({
      "font-size" : font_math + "%"
  });
}

Use that function on page load and page refresh:
$( window ).resize( ... )
$( document ).ready( ... )

On Wednesday, 15 February 2012 at 10:55:57 UTC, Vladimir 
Panteleev wrote:
> On Wednesday, 15 February 2012 at 00:33:29 UTC, torhu wrote:
>> On 14.02.2012 23:00, Walter Bright wrote:
>>> http://forum.dlang.org/
>>>
>>> This should replace the old miserable web interface to the 
>>> forums.
>>>
>>> Thanks to Vladimir Panteleev for an awesome job writing this!
>>
>> Nice! One suggestion for improvement:  don't change the font 
>> size based on the browser window size.  I'm not a web 
>> programmer, but I'm sure someone here can suggest a better way 
>> of setting the font size.
>
> That's a tough one... This behavior is part of an effort to 
> make the interface look good on any screen size. This doesn't 
> include just PCs, but also mobile devices.
>
> The advantage of the current approach is that it does not rely 
> on JavaScript - it's completely CSS-based. It's not just the 
> font size, either - the navigation column on the left is hidden 
> if the viewport is not wide enough, and some other sizes are 
> adjusted.
>
> While I could use JavaScript to query the viewport window on 
> load time and apply the adjustments only on page load, it'd 
> have to mean relying on JavaScript, and you'd still see the 
> font size change when you resize the window and click a link.
>
> I don't think having a "font size" JavaScript widget is a 
> better solution. It'd mean having one canned experience 
> optimized for one device be the default for all devices. 
> Detecting user-agents or other complicated logic is not 
> something I wish to go down, either.
>
> May I ask why you don't like the current behavior?
February 15, 2012
Re: D forums now live!
On 2012-02-15 11:55, Vladimir Panteleev wrote:
> On Wednesday, 15 February 2012 at 00:33:29 UTC, torhu wrote:
>> On 14.02.2012 23:00, Walter Bright wrote:
>>> http://forum.dlang.org/
>>>
>>> This should replace the old miserable web interface to the forums.
>>>
>>> Thanks to Vladimir Panteleev for an awesome job writing this!
>>
>> Nice! One suggestion for improvement: don't change the font size based
>> on the browser window size. I'm not a web programmer, but I'm sure
>> someone here can suggest a better way of setting the font size.
>
> That's a tough one... This behavior is part of an effort to make the
> interface look good on any screen size. This doesn't include just PCs,
> but also mobile devices.
>
> The advantage of the current approach is that it does not rely on
> JavaScript - it's completely CSS-based. It's not just the font size,
> either - the navigation column on the left is hidden if the viewport is
> not wide enough, and some other sizes are adjusted.

I really like this behavior but noted a couple of things. Take this for 
example:

http://imageshack.us/f/140/dfeediphone.png/

This is an image from the iPhone simulator. As you can see, the text in 
the top post overflows the design to left. The reason for this seems to 
be because of links that don't get wrapped. It only wraps at word 
boundaries and some characters like "-". These links also causes the 
text size to become smaller sooner then it seems to have.

An idea to fix this would be to use the CSS3 property "word-break":

http://www.w3schools.com/cssref/css3_pr_word-break.asp

An other idea, that would work for basically all browsers, would be to 
add zero-width spaces to the links:

http://en.wikipedia.org/wiki/Zero-width_space

-- 
/Jacob Carlborg
February 15, 2012
Re: D forums now live!
On Wednesday, 15 February 2012 at 12:44:22 UTC, Jacob Carlborg 
wrote:
> I really like this behavior but noted a couple of things. Take 
> this for example:
>
> http://imageshack.us/f/140/dfeediphone.png/
>
> This is an image from the iPhone simulator. As you can see, the 
> text in the top post overflows the design to left. The reason 
> for this seems to be because of links that don't get wrapped. 
> It only wraps at word boundaries and some characters like "-". 
> These links also causes the text size to become smaller sooner 
> then it seems to have.
>
> An idea to fix this would be to use the CSS3 property 
> "word-break":
>
> http://www.w3schools.com/cssref/css3_pr_word-break.asp

It looks like it will break on any character indiscriminately, so 
looks like it'd need to be applied selectively. There's no way to 
get it to prefer breaking on whitespace/punctuation, but resort 
to breaking at arbitrary points otherwise?

> An other idea, that would work for basically all browsers, 
> would be to add zero-width spaces to the links:
>
> http://en.wikipedia.org/wiki/Zero-width_space

I'm wary of magical characters because they may end up in text 
copied by the user. For example, what if someone posts a code 
sample that contains a long string of alphanumerics?
February 15, 2012
Re: D forums now live!
On Tue, 14 Feb 2012 17:00:05 -0500, Walter Bright  
<newshound2@digitalmars.com> wrote:

> http://forum.dlang.org/
>
> This should replace the old miserable web interface to the forums.
>
> Thanks to Vladimir Panteleev for an awesome job writing this!

The "Forums" link on the left points at  
http://digitalmars.com/NewsGroup.html for many pages (including dlang.org  
home page).  Please make this point at the new forum page.

Great job Vladimir!

-Steve
February 15, 2012
Re: D forums now live!
Am 15.02.2012 11:55, schrieb Vladimir Panteleev:
> On Wednesday, 15 February 2012 at 00:33:29 UTC, torhu wrote:
>> On 14.02.2012 23:00, Walter Bright wrote:
>>> http://forum.dlang.org/
>>>
>>> This should replace the old miserable web interface to the forums.
>>>
>>> Thanks to Vladimir Panteleev for an awesome job writing this!
>>
>> Nice! One suggestion for improvement: don't change the font size based
>> on the browser window size. I'm not a web programmer, but I'm sure
>> someone here can suggest a better way of setting the font size.
>
> That's a tough one... This behavior is part of an effort to make the
> interface look good on any screen size. This doesn't include just PCs,
> but also mobile devices.
>
> The advantage of the current approach is that it does not rely on
> JavaScript - it's completely CSS-based. It's not just the font size,
> either - the navigation column on the left is hidden if the viewport is
> not wide enough, and some other sizes are adjusted.
>
> While I could use JavaScript to query the viewport window on load time
> and apply the adjustments only on page load, it'd have to mean relying
> on JavaScript, and you'd still see the font size change when you resize
> the window and click a link.
>
> I don't think having a "font size" JavaScript widget is a better
> solution. It'd mean having one canned experience optimized for one
> device be the default for all devices. Detecting user-agents or other
> complicated logic is not something I wish to go down, either.

Do you know of CSS media queries? These together with some <meta> tags 
for mobile browsers make for a simple and powerful way to have a perfect 
layout on every device and resolution (on IE CSS conditionals can be used).

I would highly recommend this approach.

(Although I personally do not mind the current approach too much, apart 
from the fact that parts of the text do not scale)
February 15, 2012
Re: D forums now live!
Am 15.02.2012 15:52, schrieb Sönke Ludwig:
> Am 15.02.2012 11:55, schrieb Vladimir Panteleev:
>> On Wednesday, 15 February 2012 at 00:33:29 UTC, torhu wrote:
>>> On 14.02.2012 23:00, Walter Bright wrote:
>>>> http://forum.dlang.org/
>>>>
>>>> This should replace the old miserable web interface to the forums.
>>>>
>>>> Thanks to Vladimir Panteleev for an awesome job writing this!
>>>
>>> Nice! One suggestion for improvement: don't change the font size based
>>> on the browser window size. I'm not a web programmer, but I'm sure
>>> someone here can suggest a better way of setting the font size.
>>
>> That's a tough one... This behavior is part of an effort to make the
>> interface look good on any screen size. This doesn't include just PCs,
>> but also mobile devices.
>>
>> The advantage of the current approach is that it does not rely on
>> JavaScript - it's completely CSS-based. It's not just the font size,
>> either - the navigation column on the left is hidden if the viewport is
>> not wide enough, and some other sizes are adjusted.
>>
>> While I could use JavaScript to query the viewport window on load time
>> and apply the adjustments only on page load, it'd have to mean relying
>> on JavaScript, and you'd still see the font size change when you resize
>> the window and click a link.
>>
>> I don't think having a "font size" JavaScript widget is a better
>> solution. It'd mean having one canned experience optimized for one
>> device be the default for all devices. Detecting user-agents or other
>> complicated logic is not something I wish to go down, either.
>
> Do you know of CSS media queries? These together with some <meta> tags
> for mobile browsers make for a simple and powerful way to have a perfect
> layout on every device and resolution (on IE CSS conditionals can be used).
>
> I would highly recommend this approach.
>
> (Although I personally do not mind the current approach too much, apart
> from the fact that parts of the text do not scale)

just noted my answer was not quite up-to-date ;)
February 15, 2012
Re: D forums now live!
On 2012-02-15 15:06, Vladimir Panteleev wrote:
> On Wednesday, 15 February 2012 at 12:44:22 UTC, Jacob Carlborg wrote:
>> I really like this behavior but noted a couple of things. Take this
>> for example:
>>
>> http://imageshack.us/f/140/dfeediphone.png/
>>
>> This is an image from the iPhone simulator. As you can see, the text
>> in the top post overflows the design to left. The reason for this
>> seems to be because of links that don't get wrapped. It only wraps at
>> word boundaries and some characters like "-". These links also causes
>> the text size to become smaller sooner then it seems to have.
>>
>> An idea to fix this would be to use the CSS3 property "word-break":
>>
>> http://www.w3schools.com/cssref/css3_pr_word-break.asp
>
> It looks like it will break on any character indiscriminately, so looks
> like it'd need to be applied selectively.

Exactly, it should only be applied to links.

> There's no way to get it to
> prefer breaking on whitespace/punctuation, but resort to breaking at
> arbitrary points otherwise?

It don't think so.

>> An other idea, that would work for basically all browsers, would be to
>> add zero-width spaces to the links:
>>
>> http://en.wikipedia.org/wiki/Zero-width_space
>
> I'm wary of magical characters because they may end up in text copied by
> the user. For example, what if someone posts a code sample that contains
> a long string of alphanumerics?

It depends on where you paste it. Copying a string containing a 
zero-width space and pasting it in TextMate results in a visible space. 
If I instead paste it in TextEdit there's no visible space. I tried a 
few other applications as well and there was no visible space in those.

-- 
/Jacob Carlborg
February 15, 2012
Re: D forums now live!
"Ludovic Silvestre" <ludovic.silvestre@gmail.com> wrote in message 
news:yuepxdfcgjebpkkhjnny@dfeed.kimsufi.thecybershadow.net...
>

I was wondering why the text seemed to be a completely different size on 
different browsers!

> First of all, I recommend to use % for the body's font-size (which you are 
> already using) and the rest should be set with em. That way, the body 
> font-size will be equal to the browser default font size, and the rest of 
> the page will be based on that size.
>

Yes. This.

> Another suggestion is using something like this: 
> http://flexknowlogy.learningfield.org/2008/06/26/setting-font-size-proportional-to-window-size/
>
> Here is an example of the js code:
> function updateFontSize(){
>   msg = document.body.clientWidth;
>
>   var font_math = Math.round( 0.012 * msg * 10 );
>   font_math = font_math < 100 ? 100 : font_math;
>
>   $( "body" ).css({
>       "font-size" : font_math + "%"
>   });
> }
>
> Use that function on page load and page refresh:
> $( window ).resize( ... )
> $( document ).ready( ... )
>

That's not good (and I don't mean because of the JS - it's always possible 
to have non-JS fallback). This is a classic case of narrowly optimizing for 
one specific metric (ie, getting a consistent words-per-line) instead of 
always keeping an eye on the big picture. The problem this creates is that 
font sizes become too uncontrolled:

First of all, shrinking the window *should* re-flow the text, not cause it 
to be too small to read. A shorter line length is *much* better than tiny 
text.

Second, I tried the example:

http://jaredstein.org/resources/stein/js/fonter.html

The text on that page (when I have JS on) is so enormous, that I actually 
have a *very* hard time reading it. Much, much harder than reading really 
long lines. I have to go messing around with my browser's window size just 
to make it readable. I shouldn't have to do that, I've never had to do that 
before, and honestly, who would ever even *think* to do that?

Yea, you *could* clamp the max and min font sizes, but it's really just a 
goofy approach overall. There's a reason that desktop apps never scale by 
messing with font size. Consistent controlled font size just turns out to be 
more important than consistent line length. You're much better off just 
using the CSS "max-width" (or something like that, I forget the exact name) 
and maybe "min-width", both specified in em of course.

In any case, this is one of the reasons I hate the modern web. On the user's 
side, content and view have become completely married together. That's a 
*huge* step backwards. Thanks to a very large effort put into standard file 
formats and general computer-to-computer interop, it used to be that any 
content could be viewed in any program, any UI, any style, any anything the 
*user* wanted. We had achieved a computing golden age! But once things moved 
to the web, that got completely thrown out the window as interface is now 
inseparably *bundled* with content once again (and vice versa - content 
comes inseparably bundled with the interface). While model-view separation 
is popular among webdevs, that separation exists completely on the 
developer's side, not the user's side. Of course in this particular case, 
it's not quite so bad because there's lots of different interfaces to the 
same NNTP server, but still...
1 2 3 4 5 6 7
Top | Discussion index | About this forum | D home