Mozilla 翻訳 フォーラム一覧 Mozilla 翻訳
Mozilla Japan 翻訳部門 ではmozilla.org 全体の日本語化を目指して活動しています。
Mozilla Japan のサイトは翻訳部門が和訳したドキュメントをベースに構築されています。
 
 よくある質問よくある質問   検索検索   登録ユーザ一覧登録ユーザ一覧   グループグループ   登録登録 
 ユーザ設定ユーザ設定   ログインして PM を確認ログインして PM を確認   ログインログイン 

Template:cssanimatabledef

 
トピックの新規投稿   返信    Mozilla 翻訳 フォーラム一覧 -> Mozilla Developer Network
前のトピックを表示 :: 次のトピックを表示  
著者 メッセージ
mar



登録日: 2004年11月 11日
記事: 86


ユーザ情報を表示 メッセージを送信 ウェブサイトに移動
記事 件名: Template:cssanimatabledef     投稿時間: 2013年4月29日(月) 19:52 引用

CSS animated properties で使われているテンプレート (Template:cssanimatabledef) がひどいので書き直してみました。
Template の編集権限がないみたいなので、こちらに貼り付けます。
Code:
<%
// $0 is the name of the definition (property or data type), without < > or ''
// $1 is a string containing values describing how the animation will be done
// $2 is a string containing an additional to be appended.

var lang = env.locale;

const s_yes = "yes, ";
const s_as  = "as ";

// For the variable of s_desc_listof
const s_repeatablelist = 'a repeatable list of ';
const s_simplelist = 'a simple list of ';

// For the variable of s_desc (and s_lpc_append which is appended to s_desc_append)
const s_transform = 'a transform';
const s_length = 'a <a href="/' + lang + '/docs/CSS/length#Interpolation" title="Values of the <length> CSS data type are interpolated as real, floating-point numbers.">length</a>';
const s_lpc = s_length + ', <a href="/' + lang + '/docs/CSS/percentage#Interpolation" title="Values of the <percentage> CSS data type are interpolated as real, floating-point numbers.">percentage</a> or calc();';
const s_lpc_append = ' when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. ';
const s_color = 'a <a href="/' + lang + '/docs/CSS/color_value#Interpolation" title="Values of the <color> CSS data type are interpolated on each of their red, green, blue components, each handled as a real, floating-point number. Note that interpolation of colors happens in the alpha-premultiplied sRGBA color space to prevent unexpected grey colors to appear.">color</a>';
const s_integer = 'an <a href="/' + lang + '/docs/CSS/integer#Interpolation" title="Values of the <integer> CSS data type are interpolated via integer discrete steps. The calculation is done as if they were real, floating-point numbers and the discrete value is obtained using the floor function.">integer</a>';
const s_number = 'a <a href="/' + lang + '/docs/CSS/number#Interpolation" title="Values of the <number> CSS data type are interpolated as real, floating-point, numbers.">number</a>';
const s_shadowlist = 'a shadow list';
const s_visibility = 'a <a href="/' + lang + '/docs/CSS/visibility#Interpolation" title="Values of the visibility CSS property are interpolable if the start or the end value is visible. In that case all values of the timing function which are equal to 1 map to visible and non-equal to 1 to non-visible.">visibility</a>';
const s_font_stretch = 'a <a href="/' + lang + '/docs/CSS/font-stretch#Interpolation" title="Font stretch values are interpolated in discrete steps. The interpolation happens as though the ordered values are equally spaced real numbers; the result is rounded to the nearest value, with values exactly halfway between two values rounded towards the later value, that is the most expanded one.">font stretch</a>';
const s_font_weight = 'a <a href="/' + lang + '/docs/CSS/font-weight#Interpolation" title="Font weight values are interpolated via discrete steps (multiples of 100). The interpolation happens in real number space and is converted to an integer by rounding to the nearest multiple of 100, with values halfway between multiples of 100 rounded towards positive infinity.">font weight</a>';
const s_rectangle = 'a <a href="/' + lang + '/docs/CSS/shape#Interpolation" title="Values of the <shape> CSS data type which are rectangles are interpolated over their top, right, bottom and left component, each treated as a real, floating-point number.">rectangle</a>';

// Read the word of the parameters one by one and store them in an array
var values = new Array();
values = $1.split(" ");

var s_desc_listof = "";
var s_desc = "";
var s_desc_append = $2;
for (var i=0; i<values.length; i++) {
    if (s_desc != "") {  // if the values has 2 or more s_desc.
        s_desc += ', ';
    }

    switch (values[i]) {
        case 'simplelist':
            s_desc_listof += s_simplelist;
            break;
        case 'repeatablelist':
            s_desc_listof += s_repeatablelist;
            break;
        case 'transform':
            s_desc += s_transform;
            break;
        case 'length':
            s_desc += s_length;
            break;
        case 'lpc':
            s_desc += s_lpc;
            s_desc_append = s_lpc_append + s_desc_append;
            break;
        case 'color':
            s_desc += s_color;
            break;
        case 'integer':
            s_desc += s_integer;
            break;
        case 'number':
            s_desc += s_number;
            break;
        case 'shadowlist':
            s_desc += s_shadowlist;
            break;
        case 'rectangle':
            s_desc += s_rectangle;
            break;
        case 'visibility':
            s_desc += s_visibility;
            break;
        case 'font_stretch':
            s_desc += s_font_stretch;
            break;
        case 'font_weight':
            s_desc += s_font_weight;
            break;
        default:
            s_desc += '*Unknown value in DB (' + values[i] + ')*';
    }
}
// sorting of items in the description must be localizable.
var description = s_yes + s_as + s_desc_listof + s_desc + s_desc_append;

var result = '<span id="animatable-' + $0 + '">' + description + '</span>';

%><%- result %>


ちなみに、元のページからはこんな感じで呼び出されてます。
Code:
<td>{{cssanimatabledef("order", "integer")}}</td>
<td>{{cssanimatabledef("background-color", "color")}}</td>
<td>{{cssanimatabledef("background-position", "repeatablelist simplelist lpc")}}</td>
<td>{{cssanimatabledef("background-size", "repeatablelist simplelist lpc", ". This means keyword values are not animatable.")}}</td>

____________________
- mar -
mar



登録日: 2004年11月 11日
記事: 86


ユーザ情報を表示 メッセージを送信 ウェブサイトに移動
記事 件名: Re: Template:cssanimatabledef     投稿時間: 2013年4月30日(火) 00:07 引用

ethertank さんの助言をいただいて、ローカライズできるように変更してみました。
# 全然テストしてません。

参考: KumaScript 入門

Code:
<%
// $0 is the name of the definition (property or data type), without < > or ''
// $1 is a string containing values describing how the animation will be done
// $2 is a string containing an additional to be appended.

var lang = env.locale;

// Note: Sorting of l10n items are specified at the bottom of this page.
var str = mdn.localString({
  "en-US": {
      'yes': 'yes, ',
      'as': 'as ',
      'sep': ', ',
      // For the variable of s_desc_listof
      'repeatablelist': 'a repeatable list of ',
      'simplelist': 'a simple list of ',
      // For the variable of s_desc (and s_lpc_append which is appended to s_desc_append)
      'transform': 'a transform',
      'length': 'a <a href="/' + lang + '/docs/CSS/length#Interpolation" title="Values of the <length> CSS data type are interpolated as real, floating-point numbers.">length</a>',
      'lpc': str['length'] + ', <a href="/' + lang + '/docs/CSS/percentage#Interpolation" title="Values of the <percentage> CSS data type are interpolated as real, floating-point numbers.">percentage</a> or calc();',
      'lpc_append': ' when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. ',
      'color': 'a <a href="/' + lang + '/docs/CSS/color_value#Interpolation" title="Values of the <color> CSS data type are interpolated on each of their red, green, blue components, each handled as a real, floating-point number. Note that interpolation of colors happens in the alpha-premultiplied sRGBA color space to prevent unexpected grey colors to appear.">color</a>',
      'integer': 'an <a href="/' + lang + '/docs/CSS/integer#Interpolation" title="Values of the <integer> CSS data type are interpolated via integer discrete steps. The calculation is done as if they were real, floating-point numbers and the discrete value is obtained using the floor function.">integer</a>',
      'number': 'a <a href="/' + lang + '/docs/CSS/number#Interpolation" title="Values of the <number> CSS data type are interpolated as real, floating-point, numbers.">number</a>',
      'shadowlist': 'a shadow list',
      'visibility': 'a <a href="/' + lang + '/docs/CSS/visibility#Interpolation" title="Values of the visibility CSS property are interpolable if the start or the end value is visible. In that case all values of the timing function which are equal to 1 map to visible and non-equal to 1 to non-visible.">visibility</a>',
      'font_stretch': 'a <a href="/' + lang + '/docs/CSS/font-stretch#Interpolation" title="Font stretch values are interpolated in discrete steps. The interpolation happens as though the ordered values are equally spaced real numbers; the result is rounded to the nearest value, with values exactly halfway between two values rounded towards the later value, that is the most expanded one.">font stretch</a>',
      'font_weight': 'a <a href="/' + lang + '/docs/CSS/font-weight#Interpolation" title="Font weight values are interpolated via discrete steps (multiples of 100). The interpolation happens in real number space and is converted to an integer by rounding to the nearest multiple of 100, with values halfway between multiples of 100 rounded towards positive infinity.">font weight</a>',
      'rectangle': 'a <a href="/' + lang + '/docs/CSS/shape#Interpolation" title="Values of the <shape> CSS data type which are rectangles are interpolated over their top, right, bottom and left component, each treated as a real, floating-point number.">rectangle</a>'
    },
    "ja"   : {
      'yes': '可。',
      'as': ' の値として補完します',
      'sep': ', ',
      // For the variable of s_desc_listof
      'repeatablelist': 'の反復可能リスト',
      'simplelist': 'の単純なリスト形式',
      // For the variable of s_desc (and s_lpc_append which is appended to s_desc_append)
      'transform': 'transform',
      'length': '<a href="/' + lang + '/docs/CSS/length#Interpolation" title="Values of the <length> CSS data type are interpolated as real, floating-point numbers.">length</a>',
      'lpc': str['length'] + 'または <a href="/' + lang + '/docs/CSS/percentage#Interpolation" title="Values of the <percentage> CSS data type are interpolated as real, floating-point numbers.">percentage</a>, calc();',
      'lpc_append': ' 両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます',
      'color': '<a href="/' + lang + '/docs/CSS/color_value#Interpolation" title="Values of the <color> CSS data type are interpolated on each of their red, green, blue components, each handled as a real, floating-point number. Note that interpolation of colors happens in the alpha-premultiplied sRGBA color space to prevent unexpected grey colors to appear.">color</a>',
      'integer': '<a href="/' + lang + '/docs/CSS/integer#Interpolation" title="Values of the <integer> CSS data type are interpolated via integer discrete steps. The calculation is done as if they were real, floating-point numbers and the discrete value is obtained using the floor function.">integer</a>',
      'number': '<a href="/' + lang + '/docs/CSS/number#Interpolation" title="Values of the <number> CSS data type are interpolated as real, floating-point, numbers.">number</a>',
      'shadowlist': 'shadow リスト',
      'visibility': '<a href="/' + lang + '/docs/CSS/visibility#Interpolation" title="Values of the visibility CSS property are interpolable if the start or the end value is visible. In that case all values of the timing function which are equal to 1 map to visible and non-equal to 1 to non-visible.">visibility</a>',
      'font_stretch': '<a href="/' + lang + '/docs/CSS/font-stretch#Interpolation" title="Font stretch values are interpolated in discrete steps. The interpolation happens as though the ordered values are equally spaced real numbers; the result is rounded to the nearest value, with values exactly halfway between two values rounded towards the later value, that is the most expanded one.">font stretch</a>',
      'font_weight': '<a href="/' + lang + '/docs/CSS/font-weight#Interpolation" title="Font weight values are interpolated via discrete steps (multiples of 100). The interpolation happens in real number space and is converted to an integer by rounding to the nearest multiple of 100, with values halfway between multiples of 100 rounded towards positive infinity.">font weight</a>',
      'rectangle': '<a href="/' + lang + '/docs/CSS/shape#Interpolation" title="Values of the <shape> CSS data type which are rectangles are interpolated over their top, right, bottom and left component, each treated as a real, floating-point number.">rectangle</a>'
    }
});


// Read the word of the parameters one by one and store them in an array
var values = new Array();
values = $1.split(" ");

var s_desc_listof = "";
var s_desc = "";
var s_desc_append = $2;
for (var i=0; i<values.length; i++) {
    if (s_desc != "") {  // if the values has 2 or more s_desc.
        s_desc += str['sep'];
    }

    switch (values[i]) {
        case 'simplelist':
            s_desc_listof += str['simplelist'];
            break;
        case 'repeatablelist':
            s_desc_listof += str['repeatablelist'];
            break;
        case 'transform':
            s_desc += str['transform'];
            break;
        case 'length':
            s_desc += str['length'];
            break;
        case 'lpc':
            s_desc += str['lpc'];
            s_desc_append = str['lpc_append'] + s_desc_append;
            break;
        case 'color':
            s_desc += str['color'];
            break;
        case 'integer':
            s_desc += str['integer'];
            break;
        case 'number':
            s_desc += str['number'];
            break;
        case 'shadowlist':
            s_desc += str['shadowlist'];
            break;
        case 'rectangle':
            s_desc += str['rectangle'];
            break;
        case 'visibility':
            s_desc += str['visibility'];
            break;
        case 'font_stretch':
            s_desc += str['font_stretch'];
            break;
        case 'font_weight':
            s_desc += str['font_weight'];
            break;
        default:
            s_desc += '*Unknown value in DB (' + values[i] + ')*';
    }
}

// Sorting of items in the description.
var description = mdn.localString({
  "en-US": str['yes'] + str['as'] + s_desc_listof + s_desc + s_desc_append;
  "ja"   : str['yes'] + s_desc + s_desc_listof + str['as'] + s_desc_append + '。';
});

var result = '<span id="animatable-' + $0 + '">' + description + '</span>';

%><%- result %>


訂正(4/30):
repeatablelist と simplelist の訳を修正しました。
____________________
- mar -


marが2013年4月30日(火) 11:46にこの記事を編集, 編集回数: 1
mar



登録日: 2004年11月 11日
記事: 86


ユーザ情報を表示 メッセージを送信 ウェブサイトに移動
記事 件名: Re: Template:cssanimatabledef     投稿時間: 2013年4月30日(火) 00:46 引用

冒頭の var str = mdn.localString({...}); のオーバーヘッドが大きそうな感じなので、定義部分を switch 文に変更しました。

Code:
switch(lang) {
    case "ja":
      var str = {
        'yes': '可。',
        'as': ' の値として補完します',
        'sep': ', ',
 ...
        'rectangle': '<a href="/' + lang + '/docs/CSS/shape#Interpolation" title="Values of the <shape> CSS data type which are rectangles are interpolated over their top, right, bottom and left component, each treated as a real, floating-point number.">rectangle</a>'
      };
      break;
    case "en-US":
    default:
      var str = {
        'yes': 'yes, ',
        'as': 'as ',
        'sep': ', ',
  ...
        'rectangle': 'a <a href="/' + lang + '/docs/CSS/shape#Interpolation" title="Values of the <shape> CSS data type which are rectangles are interpolated over their top, right, bottom and left component, each treated as a real, floating-point number.">rectangle</a>'
      };
}


____________________
- mar -
mar



登録日: 2004年11月 11日
記事: 86


ユーザ情報を表示 メッセージを送信 ウェブサイトに移動
記事 件名: Re: Template:cssanimatabledef     投稿時間: 2013年5月01日(水) 00:26 引用

テンプレートの編集権限をもらったので、更新しました。
上に貼り付けたコードはエラーで正しく動作しません。バグフィックス版は Template:cssanimatabledef のページをみてください。
____________________
- mar -
指定期間中に書かれた記事を表示:   
トピックの新規投稿   返信    Mozilla 翻訳 フォーラム一覧 -> Mozilla Developer Network All times are GMT +9:00
Page 1 of 1

 
別のフォーラムに移る:  
新規トピックを投稿できます
既存トピックに返信できます
自分の記事を編集できません
自分の記事を削除できません
投票に参加できません


Powered by phpBB © 2001, 2006 phpBB Group (customized by dynamis)